jQuery Mobile のためのざっくりテンプレートHTML (たつをの ChangeLog)

jQuery Mobile のためのざっくりテンプレートHTML

2013-03-22-3 [Programming]

jQuery Mobile を使ってちょっと作業したので将来の自分のためにテンプレート化して残しておく。

HTMLのテンプレート（サンプル）：
http://chalow.net/misc/jquerymobile-sample.html

ソース：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    <title>サンプル</title>
  </head>
  <body>
    <div data-role="page" id="foo">
      <div data-role="panel" id="mypanel">
        <p>パネル</p>
        <p>中身</p>
      </div>
      <div data-role="header" data-position="fixed">
        <h1>ヘッダー</h1>
      </div>
      <div data-role="content">
        コンテンツ
        <a href="#" data-role="button" data-icon="star"
           data-theme="b">ボタン</a>
        <a href="#mypanel" data-role="button">パネル</a>
        <a href="#popupBasic" data-rel="popup" data-role="button"
           data-transition="pop">ポップアップ</a>
        <div data-role="popup" id="popupBasic">
          <p>ポップアップ</p><p>中身</p>
        </div>
        <div data-role="collapsible-set" data-inset="false"
             data-content-theme="d">
          <div data-role="collapsible">
            <h3>アコーディオン</h3>
            <p>中身</p>
          </div>
          <div data-role="collapsible">
            <h3>アコーディオン</h3>
            <ul data-role="listview">
              <li>リスト</li>
              <li>リスト</li>
              <li>リスト</li>
            </ul>
          </div>
          <div data-role="collapsible">
            <h3>アコーディオン</h3>
            <p>中身</p>
          </div>
        </div>
      </div>
      <div data-role="footer" data-id="foo1" data-position="fixed">
        <div data-role="navbar">
          <ul>
            <li><a href="#bar">リンク</a></li>
            <li><a href="#bar">リンク</a></li>
            <li><a href="#bar">リンク</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div data-role="page" id="bar">
      <div data-role="header">
        <h1>マルチページ</h1>
      </div>
      <div data-role="content">
        <a href="#foo" data-role="button" data-icon="check">戻る</a>
      </div>
    </div>
  </body>
</html>

コメント：
- jsやcssは「jQuery CDN」から最新のバージョンを選択。
- いろんな部品の使い方は「jQuery Mobile Demos」を参照。
- 前掲のテンプレートは Demos→Pages をベースにした。

リンク：
- jQuery Mobile http://jquerymobile.com/
- jQuery Mobile Demos http://view.jquerymobile.com/1.3.0/
- jQuery CDN - provided by (mt) Media Temple http://code.jquery.com/