jQuery Mobile Alpha 1 がリリース！触ってみた - へっぽこプログラマーの日記

先日ついにjQuery MobileのAlpha版がリリースされました。

http://jquerymobile.com/2010/10/jquery-mobile-alpha-1-released/

少し触った内容と簡単な使い方を説明します。

Demos and Documentation
http://jquerymobile.com/demos/1.0a1/

1.準備
現時点では、jQuery Mobileの動作には最新のjQuery1.4.3が必要です。
ダウンロードしたjQuery MobileとjQueryを一緒に読み込みます。

<link rel="stylesheet" href="jquery.mobile-1.0a1.css" />
<script src="jquery-1.4.3.js"></script>
<script src="jquery.mobile-1.0a1.js"></script>

この時点でページを表示すると、viewportとloading用のdivが追加されています。

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

<!-- 省略 -->
<div class="ui-loader ui-body-a ui-corner-all" style="top: 75px; ">
	<span class="ui-icon ui-icon-loading spin"></span>
	<h1>loading</h1>
</div>

2.ページ構成
jQuery Mobileの各UIは、HTML5のカスタムデータ属性を使用して構成します。
以下のようにdivタグのdata-role属性にUIタイプを指定しています。
page、header、content、footerを指定して基本的なページを構成しています。

<div data-role="page">
	<div data-role="header">
		<h1>Page Title</h1>
	</div><!-- /header -->
	<div data-role="content">	
		<p>Page content goes here.</p>		
	</div><!-- /content -->
	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /header -->
</div><!-- /page -->

3.ページ遷移
ページ遷移は、1つのHTMLファイル内で複数のページを構成する場合、遷移先のid属性をリンクに指定します。

<div data-role="page" id="foo">
	<a href="#bar">bar</a>
</div><!-- /page -->

<!-- Start of second page -->
<div data-role="page" id="bar"></div>

別のHTMLファイルにあるページを呼ぶ場合は、普通にaタグで指定すれば、自動的にajax通信でページを取得してエフェクト付きで表示してくれます。以下は、エフェクトにfadeを指定して画面遷移する例です。

<a href="foo.html" data-transition="fade">bar</a>

エフェクトは、slide、slideup、slidedown、pop、fade、flipが用意されています。

http://jquerymobile.com/demos/1.0a1/#docs/pages/docs-transitions.html

4.ダイアログ
ダイアログの表示も、aタグを利用し、属性にdata-rel="dialog"を指定するとダイアログになります。エフェクトも前述したものが使えます。

<a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>

5.ボタン
inputタグのtype属性をbutton、submit、reset、imageを指定すると同じ見た目になります。
http://jquerymobile.com/demos/1.0a1/#docs/buttons/buttons-types.html

・リンクボタン
リンクボタンはdata-role="button"を指定します。

<a href="foo.html" data-role="button" >Linked Button</a>

・インラインボタン
divタグにdata-inline="true"を指定し、ボタンを囲むと、中のボタンが1行で表示されます。

<div data-inline="true">
	<a href="index.html" data-role="button">Cancel</a>
	<a href="index.html" data-role="button" data-theme="b">Save</a>
</div>

6.チェックボックス・ラジオボタン
チェックボックスやラジオボタンは、ラベルを設定します。

<input type="checkbox" name="check" id="checkbox-1">
<label for="checkbox-1">チェック</label>

7.その他のフォームエレメント
その他のフォームエレメントは基本的には、従来通りのマークアップでモバイル用に描画されます。また、rangeやsearchなどのタイプにも対応しています。

まとめ
一部のUIを除き、普通のHTMLとしてマークアップすれば、jQuery MobileのUIとして表示してくれるので特に何も考えずにマークアップして、後から細かいデザインやテーマ等をカスタム属性を使って指定する形で良いと思います。細かい指定については「Demos and Documentation」を参照してください。
jQuery Mobileが非対応の端末に対しても標準のフォームが表示されるため、サイトが使えなくなるということは少なさそうです。今後は、テーマのカスタマイズツール、タブレットやデスクトップ向けのUIも追加されるようですし、将来が楽しみですね。

時間があればリファレンスのようなものも作ってみたいと思います。