ｊQuery Mobileテスト
①リスト内の項目がa要素で包まれている場合
→ 右端に矢印が付いたリンクとなる
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery Mobile Sample</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> </head> <body> <div data-role="page" id="index"> <div data-role="header"><h1>ヘッダー</h1></div> <div data-role="content"> <ul data-role="listview"> <li><a href="#page2">list</a></li> <li><a href="#page2">list</a></li> <li><a href="#page2">list</a></li> <li><a href="#page2">list</a></li> <li><a href="#page2">list</a></li> </ul> </div> <div data-role="footer"><h4>フッター</h4></div> </div> </body>
②入れ子状態のリスト
→ 最初にメイン（親）のリストが表示され、リストをタップするとページが遷移して子リストが表示
⇒
<ul data-role="listview" data-inset="true"> <li>list <ul> <li><a href="#page2">list1</a></li> <li><a href="#page2">list2</a></li> <li><a href="#page2">list3</a></li> <li><a href="#page2">list4</a></li> <li><a href="#page2">list5</a></li> </ul> </li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> </ul>
※data-inset属性「true」で角丸リストになる。
③li内に2つのリンクを記述で分割リストを作成
→ 1つのリスト項目に2つのリンクを設定
※2番目のリンクはリンクアイコンのみ
<ul data-role="listview" data-split-theme="a"> <li><a href="#page2">list</a><a href="page2">detail</a></li> <li><a href="#page2">list</a><a href="page2">detail</a></li> <li><a href="#page2">list</a><a href="page2">detail</a></li> </ul>
④分割リストのアイコン、テーマを設定
→ data-split-icon属性でアイコン設定
data-split-them属性でテーマを設定（デフォルトは"b"）
<ul data-role="listview" data-split-icon="gear" data-split-theme="a"> <li><a href="#page2">list</a><a href="page2">detail</a></li> <li><a href="#page2">list</a><a href="page2">detail</a></li> <li><a href="#page2">list</a><a href="page2">detail</a></li> </ul>
※「gear」は歯車のようなアイコンになる。
⑤説明および補足付きのリスト
→ <h1>と<p>タグで説明、class属性「ui-li-aside」でリスト項目の右上に補足的な情報を表示。
<ul data-role="listview"> <li><a href="#page2"><p class="ui-li-aside">2012年2月11日</p><h1>見出し</h1><p>説明の内容</p></a></li> <li><a href="#page2"><p class="ui-li-aside">2012年2月11日</p><h1>見出し</h1><p>説明の内容</p></a></li> <li><a href="#page2"><p class="ui-li-aside">2012年2月11日</p><h1>見出し</h1><p>説明の内容</p></a></li> <li><a href="#page2"><p class="ui-li-aside">2012年2月11日</p><h1>見出し</h1><p>説明の内容</p></a></li> </ul>
⑥リストに見出し設定
→ data-role属性「list-divider」を追加
<ul data-role="listview"> <li data-role="list-divider">見出し</li> <li><a href="#page2">list</a></li> <li><a href="#page2">list</a></li> </ul>
data-dividertheme属性で見出しのテーマを変更（デフォルトは"b"）
<ul data-role="listview" data-dividertheme="a">
⑦カウントバブルの追加 → class属性「ui-li-count」を追加
カウントバブルのテーマの変更 → data-count-theme属性
リスト内に数値を記述し、class属性「ui-li-count」を付けた要素で囲むと、リスト項目の右側にカウントバブルが表示。
（Webサイトの新着情報の件数を表示する場合などに利用）
<ul data-role="listview" data-inset="true" data-count-theme="b"> <li><a href="#page2">list<span class="ui-li-count">10</span></a></li> <li><a href="#page2">list<span class="ui-li-count">10</span></a></li> <li><a href="#page2">list<span class="ui-li-count">10</span></a></li> </ul>
⑧画像付きリスト
img要素を記述すると、左側に画像を表示。
※img要素で指定した画像は80×80pxに自動的にリサイズされる。
<ul data-role="listview"> <li><a href="#page2"><img src="images/patternhead20-promo (1).jpg" />list</a></li> <li><a href="#page2"><img src="images/patternhead20-promo.jpg" />list</a></li> <li><a href="#page2"><img src="images/flowers10.png" />list</a></li> <li><a href="#page2"><img src="images/flowers23.png" />list</a></li> <li><a href="#page2"><img src="images/flowers32.png" />list</a></li> </ul>
アイコンのようにして表示したい場合は、class属性「ui-li-icon」を設定。
画像が16×16pxで表示されるが、jQuery Mobile 現バージョン（1.0ベータ）では画像が40×40pxにリサイズされるため、CSSでサイズを指定する。
← 40×40pxに画像がリサイズされた。
<ul data-role="listview"> <li><a href="#page2"><img src="images/patternhead20-promo (1).jpg" class="ui-li-icon" />list</a></li> <li><a href="#page2"><img src="images/patternhead20-promo.jpg" class="ui-li-icon"/>list</a></li> <li><a href="#page2"><img src="images/flowers10.png" class="ui-li-icon" />list</a></li> <li><a href="#page2"><img src="images/flowers23.png" class="ui-li-icon" />list</a></li> <li><a href="#page2"><img src="images/flowers32.png" class="ui-li-icon"/>list</a></li> </ul>
⑨検索フィルタ
→ data-filter属性「true」を追加
リストの上部に検索フォームが配置され、検索キーワードを入力すると一致する項目だけを表示。
<ul data-role="listview" data-filter="true"> <li><a href="#page2">abcd</a></li> <li><a href="#page2">efgh</a></li> <li><a href="#page2">ijkl</a></li> <li><a href="#page2">mnop</a></li> <li><a href="#page2">qrst</a></li> </ul>
data-filter-placeholder属性で、検索フォームのプレースホルダー（初期値）「Filter items...」を変更
<ul data-role="listview" data-filter="true" data-filter-placeholder="キーワードで絞込み"> <li><a href="#page2">abcd</a></li> <li><a href="#page2">efgh</a></li> <li><a href="#page2">ijkl</a></li> <li><a href="#page2">mnop</a></li> <li><a href="#page2">qrst</a></li> </ul>
⑩見出しテーマ変更
jQuery Mobileのリスト表示は、data-theme属性でテーマを指定できるが、子要素であるli要素も個々に指定可。
<ul data-role="listview"> <li><a href="#page2">abcd</a></li> <li><a href="#page2">efgh</a></li> <li><a href="#page2">ijkl</a></li> <li data-theme="e"><a href="#page2">mnop</a></li> <li><a href="#page2">qrst</a></li> </ul>
【その他メモ】
●mobileサイトは自分でカスタマイズし、何度も作成することが大事。
●スマホは設計を優先とするので、「id」をふることは忘れない。
●width=device-widthで画像を最適化。
●<meta>から</html>まではどのスマホサイトも大枠は基本同じ。
●ページ数が増えるとclass名が増え、複雑になっていく。
●HTML5では<address>は住所のみ。コピーライトは<small>を使う。
●HTML5では疑似クラスを多様する。
●スマホ専用サイトを作るならば、サブドメインである『http://sp.〜.com/ 』の方が検索される。（通常ドメインは http://〜.com/sp/ で分岐となる）
