jQueryMobileのリストテンプレート
プレビュー
↓別ウィンドウを開いて見る
リストテンプレート
※おすすめQRコード読み取りアプリ
お父さんQR
カテゴリ: ユーティリティ
サイズ: 2.3 MB
価格： 無料
ポイント
- 分割リストのレイアウトを変更するには「data-split-icon」「data-split-theme」で指定する
- リストに画像を入れると自動的にサイズを変更する(最大80px×80px)
- 正方形ではない画像を使った場合、枠いっぱいには画像が表示されないので事前に加工が必要
コード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>リストテンプレート</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css"> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.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" data-inset="true" data-dividertheme="a"> <li data-role="list-divider">リストの種類</li> <li><a href="#page2">リスト</a></li> <li><a href="#page3">リストの中にa要素がある場合</a></li> <li><a href="#page4">リストの入れ子</a></li> <li><a href="#page5">分割リスト</a></li> <li><a href="#page6">説明付きのリスト</a></li> <li><a href="#page7">カウントバブル</a></li> <li><a href="#page8">画像付きのリスト</a></li> </ul> </div> <div data-role="footer"> <h4>© 2012 vinton</h4> </div> </div> <div data-role="page" id="page2"> <div data-role="header"> <a href="#index" data-icon="back">戻る</a> <h1>リスト</h1> </div> <div data-role="content"> <ul data-role="listview"> <li>リスト</li> <li>リスト</li> <li>リスト</li> </ul> </div> <div data-role="footer"> <h4>© 2012 vinton</h4> </div> </div> <div data-role="page" id="page3"> <div data-role="header"> <a href="#index" data-icon="back">戻る</a> <h1>リストの中にa要素がある場合</h1> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="#">リスト</a></li> <li><a href="#">リスト</a></li> <li><a href="#">リスト</a></li> </ul> </div> <div data-role="footer"> <h4>© 2012 vinton</h4> </div> </div> <div data-role="page" id="page4" > <div data-role="header"> <a href="#index" data-icon="back">戻る</a> <h1>リストの入れ子</h1> </div> <div data-role="content"> <ul data-role="listview"> <li>リスト <ul> <li><a href="#">サブリスト</a></li> <li><a href="#">サブリスト</a></li> <li><a href="#index">トップに戻る</a></li> </ul> </li> <li>リスト</li> <li>リスト</li> </ul> </div> <div data-role="footer"> <h4>© 2012 vinton</h4> </div> </div> <div data-role="page" id="page5"> <div data-role="header"> <a href="#index" data-icon="back">戻る</a> <h1>分割リスト</h1> </div> <div data-role="content"> <ul data-role="listview" data-split-icon="gear" data-split-theme="a"> <li><a href="#">リスト</a><a href="#">detail</a></li> <li><a href="#">リスト</a><a href="#">detail</a></li> <li><a href="#">リスト</a><a href="#">detail</a></li> </ul> </div> <div data-role="footer"> <h4>© 2012 vinton</h4> </div> </div> <div data-role="page" id="page6"> <div data-role="header"> <a href="#index" data-icon="back">戻る</a> <h1>説明付きのリスト</h1> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="#"><p class="ui-li-aside">2012年8月8日</p><h1>見出し</h1><p>説明の内容</p></a></li> <li><a href="#"><p class="ui-li-aside">2012年8月7日</p><h1>見出し</h1><p>説明の内容</p></a></li> <li><a href="#"><p class="ui-li-aside">2012年8月6日</p><h1>見出し</h1><p>説明の内容</p></a></li> </ul> </div> <div data-role="footer"> <h4>© 2012 vinton</h4> </div> </div> <div data-role="page" id="page7"> <div data-role="header"> <a href="#index" data-icon="back">戻る</a> <h1>カウントバブル</h1> </div> <div data-role="content"> <ul data-role="listview" data-counttheme="e"> <li><a href="#">リスト<span class="ui-li-count">10</span></a></li> <li><a href="#">リスト<span class="ui-li-count">10</span></a></li> <li><a href="#">リスト<span class="ui-li-count">10</span></a></li> </ul> </div> <div data-role="footer"> <h4>© 2012 vinton</h4> </div> </div> <div data-role="page" id="page8"> <div data-role="header"> <a href="#index" data-icon="back">戻る</a> <h1>画像付きのリスト</h1> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="#"><img src="http://jsrun.it/assets/x/a/U/L/xaUL3.jpg">リスト</a></li> <li><a href="#"><img src="http://jsrun.it/assets/u/J/Q/R/uJQRV.jpg">リスト</a></li> <li><a href="#"><img src="http://jsrun.it/assets/7/Z/W/8/7ZW8p.jpg">リスト</a></li> </ul> </div> <div data-role="footer"> <h4>© 2012 vinton</h4> </div> </div> </body> </html>
