バルーンとは、円形の囲みのことで、jQueryMobileでは、その内部に文字列を表示するために、実際の形は小さい長円形です。バルーンは<li>内の文字列の右側に表示されます。表示される文字列を想定されているのは数値で、フォントサイズは11pxです。
バルーンは<span class="ui-li-count">により表示できます。テーマの設定はウィジェットに対して、data-count-theme属性を追加します。なので、同じウィジェットのバルーンは全て同じテーマが適用されます。
●分割表示
<li>の内にリンクを2つ作ると、項目が横2つに分割されて、それぞれの領域が別々のリンクとして設定されます。後のリンクは自動的にアイコンのみのボタンとして設定されるため、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">カテゴリー1<span class="ui-li-count">15</span></a></li> <li><a href="#link2">カテゴリー2<span class="ui-li-count">25</span></a></li> <li><a href="#link3">カテゴリー3<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">画像1</a></li> <li><a href="#photo2">画像2</a></li> <li><a href="#photo3">画像3</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">ポップアップメニュー1</a></li> <li><a href="#popupmenu2">ポップアップメニュー2</a></li> <li><a href="#popupmenu3">ポップアップメニュー3</a></li> </ul> </div> <footer data-role="footer"> <h1>フッタ</h1> </footer> </section> </body> </html> |