jQuery Mobileのメモ★基本編

jQuery Mobileを使用する際の、超基本的な部分について覚書。
導入方法などは、参考になる素晴らしいサイトさんがたくさんあるので探してください。

↓この辺がとても参考になると思います。
jQuery Mobileの使い方と挙動のまとめその１
jQueryをスマートフォンなどのモバイルデバイスへ対応させるためのライブラリ「jQuery Mobile」の関連記事まとめ

公式デモがわかりやすいので、デザインなど試し試し実験中。
jQuery Mobile: Demos and Documentation
※Google ChromeなどHTML5に対応しているブラウザ、またはスマートフォンで確認してください。

jQuery Mobileを使うには、同時にjQueryも読み込む必要があります。
上記サイトを参考に基本的なソースを書き入れたら、フォームのパーツなども自動的にスマートフォンらしいＵＩに変身します。
まだAlpha版ということで、バグもあるようですが、とりあえず楽しそうなのでやってみるもの面白いかと。
そんなわけで、試行錯誤の覚え書き程度に気になる部分をメモっておきます。

※以下の内容は、自分用メモを兼ねています。
※見よう見まねでやっているので、間違いもあるかと思います。問題があった場合には、自己責任で解決をお願いしますm(_"_)m

「data-role="page"」でページを認識させる
ページ全体を「data-role="page"」で囲む。これを忘れると、jQuery Mobileが動かない。
```
<div data-role="page" id="index"></div>
```

「data-role="page"」でページ内に複数のページを設定
同一のページ内に「data-role="page"」を複数設定することで、２つ以上のページを設定することができる。２つ目以降のページが自動的に非表示になり、リンクで呼び出す。
各ページには、「id="name"」でidを指定し、リンクで呼び出す。

<!-- index ページ -->
<div id="index" data-role="page">
  <div data-role="header">
    <h1>インデックス</h1>
  </div>
  <div data-role="content">
    <p>インデックスページです。</p>
    <a data-role="button" data-transition="fade" href="#hoge">hogeへ</a>
  </div>
</div>
<!-- /index ページ -->

<!-- hoge ページ -->
<div id="hoge" data-role="page">
  <div data-role="header">
    <h1>hogeページ</h1>
  </div>
  <div data-role="content">
    <p>hogeページです。</p>
    <a data-role="button" data-transition="fade" href="#home">戻る</a>
  </div>
</div>
<!-- /hoge ページ -->

「data-role="header"」はヘッダのバー
「data-role="header"」部分には、見出し(<h1></h1>)を入れる。
前ページへの戻りボタン等のナビゲーションが表示される。
```
<div data-role="header">
   <h1>見出し</h1>
</div>
```

「data-role="content"」はページの内容部分
コンテンツ部分。ページの内容はここに書く。

<div data-role="content">
  <p>インデックスページです。</p>
  <a data-role="button" data-transition="fade" href="#hoge">hogeへ</a>
</div>

ページ遷移のアニメーション「data-transition="fade(*任意のアニメーションを設定)"」
同一ページ内でのリンクでは、スマートフォンらしいアニメーションでページ移動。ただし、外部ページへのリンクには適応されない。
アニメーションの種類は「slide」「slideup」「slidedown」「pop」「fade」「flip」が用意されている。
```
<a data-role="button" data-transition="fade" href="#hoge">hogeへ</a>
```
通常のリンクは「rel="external"」をつける
jQuery Mobileのデフォルトでは、リンクにはAjaxが使用されてリンク先は同一ページヘ読み込まれるようになっている。外部ページヘ飛ばしたい場合には、「rel="external"」の付加が必要。
```
<a rel="external" href="hoge.html">hogeのページ</a>
```
フォーム対策
リンクと同様、デフォルトではAjaxで飛ばされてしまうため、正しく動作しない場合がある。
そのため、一時的にAjaxを無効にする。
<head></head>内か、ページの上部に記載しておく。
```
<script type="text/javascript"></script>
```

今後気づいた事があれば、追記していきます。
リンクやリスト表示については、別のエントリーで追々書いていく予定。

関連記事
jQuery Mobileのメモ★リンクボタン編
jQuery Mobileのメモ★リスト編

シゴト　ときどき　ブング