バルーンとは、円形の囲みのことで、jQueryMobileでは、その内部に文字列を表示するために、実際の形は小さい長円形です。バルーンは<li>内の文字列の右側に表示されます。表示される文字列を想定されているのは数値で、フォントサイズは11pxです。
バルーンは<span class="ui-li-count">により表示できます。テーマの設定はウィジェットに対して、data-count-theme属性を追加します。なので、同じウィジェットのバルーンは全て同じテーマが適用されます。
●分割表示
<li>の内にリンクを２つ作ると、項目が横２つに分割されて、それぞれの領域が別々のリンクとして設定されます。後のリンクは自動的にアイコンのみのボタンとして設定されるため、data-icon属性によりアイコンの種類を設定します。また、この部分のデフォルトのテーマは"a"で設定されいますが、data-split-theme属性で変更できます。
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile listviewのliタグ内にHTMLタグを書く</title> <link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css"> <script src="../js/jquery-1.11.3.js"></script> <script src="../js/jquery.mobile-1.4.5.js"></script> </head> <body> <section id="page" data-role="page"> <header data-role="header"> <h1>ヘッダ</h1> </header> <article data-role="content"> <ul data-role="listview" data-inset="true" data-count-theme="a"> <li><a href="#link1">カテゴリー１<span class="ui-li-count">15</span></a></li> <li><a href="#link2">カテゴリー２<span class="ui-li-count">25</span></a></li> <li><a href="#link3">カテゴリー３<span class="ui-li-count">50</span></a></li> </ul> <ul data-role="listview" data-inset="true" data-split-theme="a"> <li> <a href="#link4">CSS<span class="ui-li-count">30記事</span> <a href="#" data-icon="search">検索</a> </li> <li> <a href="#link5">HTML<span class="ui-li-count">100記事</span> <a href="#" data-icon="check">検索</a> </li> <li> <a href="#link6">JavaScript<span class="ui-li-count">20記事</span> <a href="#" data-icon="back">検索</a> </li> </ul> </article> <footer data-role="footer"> <h1>フッタ</h1> </footer> </section> </body> </html> |
別のウィジェット内に表示
このlistviewウィジェットは、ポップアップや折り畳みの書くウィジェット内にも表示できますが、CSSで調整が必要なことがあります。
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile listviewのliタグ内にHTMLタグを書く</title> <link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css"> <script src="../js/jquery-1.11.3.js"></script> <script src="../js/jquery.mobile-1.4.5.js"></script> </head> <body> <section id="page" data-role="page"> <header data-role="header"> <h1>ヘッダ</h1> </header> <article data-role="content"> <p><a href="#popup" data-rel="popup">POPUP</a></p> <div data-role="collapsible" data-content-theme="b"> <h3>CollapsibleMenu</h3> <ul data-role="listview"> <li><a href="#photo1">画像１</a></li> <li><a href="#photo2">画像２</a></li> <li><a href="#photo3">画像３</a></li> </ul> </div> </article> <div id="popup" data-role="popup"> <header data-role="header"> <h1>Menu</h1> </header> <ul data-role="listview" data-theme="a"> <li><a href="#popupmenu1">ポップアップメニュー１</a></li> <li><a href="#popupmenu2">ポップアップメニュー２</a></li> <li><a href="#popupmenu3">ポップアップメニュー３</a></li> </ul> </div> <footer data-role="footer"> <h1>フッタ</h1> </footer> </section> </body> </html> |