jQuery Mobileを試してみる

jQuery MobileはjQueryのプラグインとして動作するモバイルサイト・モバイルアプリ用のフレームワークです。 2011.4.07時点でのバージョンは 1.0alpha4ですが4月中旬頃にはbetaバージョンが登場するようです。それではさっそく試していこうと思います。

まずは基本から：サンプル１

サンプル１へのリンク

１）最初にヘッダ部でjQueryとjQueryMobileを読み込みます。cssやjsファイルをダウンロードして読み込んでもよいのですが、今回はjquery.comでホストされているファイルを直接読み込んでいます。

<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>

２）次にページ内の要素を定義していきます。data-roleで役割を、data-themeで適用するテーマを指定します。標準ではa～eのthemeを指定可能なようです。

<div data-role="page" data-theme="a">
<div data-role="header">
<h1>ヘッダ</h1>
</div>
<div data-role="content">
内容
</div>
<div data-role="footer">
フッタ
</div>
</div>

ちなみに data-*という属性はHTML5で定義された独自データ属性というもので、適切な属性や要素がない場合に、ページやアプリケーションに固有の独自データを格納することを想定したものです。（参考URL）

ボタンを配置してみる：サンプル２

サンプル２へのリンク

サンプル２ではボタンを配置し、画面遷移するサンプルを用意しました。aタグにdata-role=”button”を指定することでボタンイメージが適用されます。
サンプルを触っていただくとわかると思いますが、スクリプトの記述なしでページ遷移の際にアニメーションしてくれます。data-transitionを指定することで色々アニメーションを設定することも可能です。このお手軽さはかなり便利ですね。
一番上のボタンから順にページ内リンク・別ページへのリンク・外部サイトへのリンクとなっています。通常のページ遷移をさせるには下のソース18行目にあるようにrel=”external”を指定します。同一サイト内はページ内リンクまたはAjaxでのページロードを行い、外部サイトへのリンクはexternalを指定するという感じでしょうか。

<div id="home" data-role="page" data-theme="a">
<div data-role="header">
<h1>ホーム</h1>
</div>
<div data-role="content">
<a href="#page2" data-role="button">ページ２</a>
<a href="test3.html" data-role="button">test3.html</a>
<a href="test3.html" data-role="button" rel="external">test3.html</a>

</div>
<div data-role="footer">
フッタ
</div>
</div>
<div id="page2" data-role="page" data-theme="a">
<div data-role="header">
<h1>ページ２</h1>
</div>
<div data-role="content">

</div>
<div data-role="footer">
フッタ
</div>
</div>

非常に簡単なサンプルしか用意しませんでしたが、jQuery Mobileの特徴が少しでも伝わったでしょうか。
機会があれば用意された様々なコンポーネントやカスタマイズ方法についても紹介していこうと思います。

（参考サイト）jQuery Mobile [基礎編]