2010年10月19日火曜日

jQuery Mobile を使ってみました

mon_sat です。
( @mon_sat is my account as a developer. )

jQuery Mobilealpha 版がリリースされたようです。
というわけで、早速使ってみました。


まず、ソースをダウンロード・・・しません。
え???
いきなり、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
このエントリーをはてなブックマークに追加

Facebookへの「いいね!」ありがとうございます