( @mon_sat is my account as a developer. )
jQuery Mobile の alpha 版がリリースされたようです。
というわけで、早速使ってみました。
まず、ソースをダウンロード・・・しません。
え？？？
いきなり、HTMLを書いていきましょう。
<html> <head> <meta charset="utf-8"> <title>jQuery Mobile テスト</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head> <body> </body> </html>
これで、準備完了です。
コードはホストされているので、リンクを貼るだけです。
あとは、bodyの中に、HTMLタグを書いていきます。
（ドキュメントがデモ 1.0α になっています）
。ドキュメント内では、divタグを使って書く例が示されていますが、せっかくなのでHTML5のタグを使用しましょう
<section data-role="page" data-theme="b" id="ds-home">
<header data-role="header" data-theme="b">
<h1>Header</h1>
</header><!-- /header -->
<article data-role="content">
<div>This is a test page.</div>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Category</li>
<li><a href="#ds-page-1">First Child</a></li>
<li><a href="#ds-page-2">Second Child</a></li>
</ul>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Category 2</li>
<li><a href="#ds-page-3">First Child 2</a></li>
<li><a href="#ds-page-4">Second Child 2</a></li>
</ul>
</article><!-- /content -->
<header data-role="footer" data-theme="b">
<h2>Footer</h2>
</header><!-- /footer -->
</section><!-- /page -->body内だけ記述しています。その他は不変です。これで、スクリーンショットの左側のようになります。
なお、2行目と18行目の data-theme="b" を "a" に、7行目と12行目の data-dividertheme="b" を "a" にすると、右のスクリーンショットのようにテーマは変更できます。
テーマの種類も豊富にあるようです。
jQuery Mobile では、ひとつのHTMLに、複数のページを記述します。
上記の例では、sectionタグの分だけ、ページを作ることになります。
id="ds-home"という任意のidを与えたsection(div等)のタグに、 data-role="page" とすることで、jQuery Mobile がページとして認識します。
ページ内のリンクは、 <a href="#foo">foo</a> とします。この場合、 <section data-role="page" id="foo"></section>が存在すれば、リンクをタップ（クリック）することで、そのページへ遷移します。
ページの遷移はすべてajaxで行われ、ページが存在しなければ、そのようなメッセージが表示されます。（右図）
また、 <a href="bar.html">bar</a> というリンクも可能で、この場合は外部ファイルから section が読み込まれます。（data-role="page"となっているsectionやdivが読み込まれます）
なおこの場合は、bar.html内に複数のページ要素がある場合、最後の物が読み込まれるようです。
いろいろ試したのですが、外部ページの指定のIDというようには行きませんでした。
なお、遷移についてはその履歴をjQuery Mobileが記録しています。
それに応じて、自動的に、左上に「back」というリンク（ボタン）が作られます。
（動きとしては history.back のような動きとなります）
<a href="foo.html" rel="external">foo</a> のように記述すると、ページはajaxではなく、1から読み込まれます。
そのため、履歴も無くなり、左上のリンクも表示されません。
（ほかにもtargetが指定されていると同様の扱いのようです）
とりあえず、今日はここまでです。
via jQuery Mobile
