下位ページ
ページ目次
画面サイズへの対応
viewport を設定する
<meta name="viewport" content="パラメーター名=値, ..." />
- width=device-width : コンテンツ幅をデバイスの幅に合わせる
- initial-scale=1 : 初回時の拡大率
テーマ
色やアイコンの見栄えを変更できる。個々の背景に対して設定するのではなく、全体を変えるイメージ。実際にはヘッダごと。
最大で26種類（a,b,c,...,z)
変更の仕方
要素にテーマを設定する
<div data-role="page" data-theme="b">
ヘッダだけ、ボディだけ、という設定も可。
テーマの種類
a,b,c,d,e（デフォルトはa）
独自テーマの作成（ThemeRoller）
作り方
サイトに行くと、なんとなく分かる。
使い方
- 作ったcss関係をダウンロードして、解凍。
- cssフォルダを作って
- 解凍したフォルダごと（themesフォルダごと）入れておく。
- これまでにjquery.mobile.cssを使っていたら、「テーマ無し（＝構造のみ）css」に変更しておく。
<link rel="stylesheet" href="css/themes/【自分で作ったテーマの名前】.css" />
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
レイアウト
ボタンを１行に複数個配置する
class属性にui-grid-aを指定 → ２列配置
class属性にui-grid-bを指定 → ３列配置
class属性にui-grid-dを指定 → ５列配置
ボタンの使用可/不可
.button('enable')
.button('disable')
ヘッダ／フッタの設定
ブロック要素に data-role="header" もしくは data-role="footer" を付加する。
data-role="header"
通常は<h1>...</h1>（h1～h6）でタイトルを設定する
アイコン
<a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
最終更新：2015年07月12日 11:55
