jQuery Mobileの使い方

HTML&CSS
スポンサーリンク

準備

jQuery Mobileのページに行って必要なライブラリをダウンロードまたはリンクします。

リファレンス参考
data-role
transition

テーマ作成

作成

sample.html

  1. HTML5の準備をします。
  2. viewportの設定
  3. jQuery Mobileのリンク
  4. コーディングはdivでレイアウトを作成します。
  5. divのdata-role属性でパーツを決めて行きます。
  • data-role=”page”    ページ全体
  • data-role=”header”   ヘッダー領域
  • data-role=”content”  コンテンツ領域
  • data-role=”footer”   フッター領域

sample2.html

  1. 2ページ目以降も同一ファイルに作成します
  2. ページ変更はdata-role=”page”とid名で判別
  3. 大まかなレイアウトは1ページ目をコピーして使用します
  4. ページの移動はa要素のリンクで行う。リンク先はid名で指定します
  5. 通常の外部リンクはフルパスで記述
  6. a要素にrel属性「external」を指定するとAjax遷移ではなく通常リンクになります

サイト内のリンク方法

サイト内のリンクは通常のhtml同様にa要素で行います。a要素にdata-ajax=”false”を入れると通常リンク、省略するとAjaxでリンクとなることがポイントです。

sample3.html
リンクのアニメーション動作はa要素にdata-transition属性を使用します。
ボタンの作成はdata-role=”button” data-icon=”gear”を使用します。

sample4.html
アイコンの種類

ボタンの横並びは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”で囲みます。

sample10.html

タイトルとURLをコピーしました