準備
jQuery Mobileのページに行って必要なライブラリをダウンロードまたはリンクします。
作成
- HTML5の準備をします。
- viewportの設定
- jQuery Mobileのリンク
- コーディングはdivでレイアウトを作成します。
- divのdata-role属性でパーツを決めて行きます。
- data-role=”page” ページ全体
- data-role=”header” ヘッダー領域
- data-role=”content” コンテンツ領域
- data-role=”footer” フッター領域
- ２ページ目以降も同一ファイルに作成します
- ページ変更はdata-role=”page”とid名で判別
- 大まかなレイアウトは1ページ目をコピーして使用します
- ページの移動はa要素のリンクで行う。リンク先はid名で指定します
- 通常の外部リンクはフルパスで記述
- a要素にrel属性「external」を指定するとAjax遷移ではなく通常リンクになります
サイト内のリンク方法
サイト内のリンクは通常のhtml同様にa要素で行います。a要素にdata-ajax=”false”を入れると通常リンク、省略するとAjaxでリンクとなることがポイントです。
sample3.html
リンクのアニメーション動作はa要素にdata-transition属性を使用します。
ボタンの作成はdata-role=”button” data-icon=”gear”を使用します。
ボタンの横並びはdata-inline=”true”で行います。
sample5.html
テーマの変更はdata-theme=”値”で行います。現在値は「a」か「b」のみです。
sample6.html
ナビゲーションの作成はdata-role=”navbar”を使用します。
例
<div data-role="navbar" data-type="horizontal">
<ul>
<li><a href="#home" data-icon="home">home</a></li>
<li><a href="#menu" data-transition="flip" data-icon="carat-r">menu</a></li>
<li><a href="#access" data-transition="flip" data-icon="carat-r">access</a></li>
</ul>
</div>
ヘッダの固定はdata-position=”fixed”を使用します。
フォームは各パーツをdivのdata-role=”fieldcontain”で囲みます。
