jQuery Mobile リストの内容
jQueryモバイルリストアイコン
デフォルトでは、各リスト項目には矢印アイコン「carat-r」（右矢印）が含まれます。このアイコンを変更したい場合は、data-icon 属性を使用できます:
インスタンス
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>列表图标:</h2> <ul data-role="listview" data-inset="true"> <li><a href="#">默认是右箭头</a></li> <li data-icon="plus"><a href="#">data-icon="plus"</a></li> <li data-icon="minus"><a href="#">data-icon="minus"</a></li> <li data-icon="delete"><a href="#">data-icon="delete"</a></li> <li data-icon="location"><a href="#">data-icon="location"</a></li> <li data-icon="false"><a href="#">data-icon="false"</a></li> </ul> </div> </div> </body>
インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
 | data-icon="false" はアイコンを削除します。 |
|---|
より完全な jQuery Mobile ボタン アイコンについては、jQuery Mobile をご覧ください。 アイコンリファレンスマニュアル。
16x16 アイコン
標準の 16x16px アイコンをリストに追加したい場合は、リスト項目に <img> 要素を追加し、「ui-li-icon」クラスを使用します:
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>列表图标:</h2> <ul data-role="listview" data-inset="true"> <li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li> <li><a href="#"><img src="gb.png" alt="Great Britain" class="ui-li-icon">Great Britain</a></li> <li><a href="#"><img src="finland.png" alt="Finland" class="ui-li-icon">Finland</a></li> <li><a href="#"><img src="germany.png" alt="Germany" class="ui-li-icon">Germany</a></li> <li><a href="#"><img src="france.png" alt="France" class="ui-li-icon">France</a></li> </ul> </div> </div> </body> </html>
インスタンスの実行»
[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します
jQuery モバイル リストのサムネイル
16x16 ピクセルより大きい画像の場合は、リンクに <img> 要素を追加してください。
jQuery Mobile は画像を自動的に 80x80 ピクセルに拡大縮小します:
例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>列表图标:</h2> <ul data-role="listview" data-inset="true"> <li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li> <li><a href="#"><img src="gb.png" alt="Great Britain" class="ui-li-icon">Great Britain</a></li> <li><a href="#"><img src="finland.png" alt="Finland" class="ui-li-icon">Finland</a></li> <li><a href="#"><img src="germany.png" alt="Germany" class="ui-li-icon">Germany</a></li> <li><a href="#"><img src="france.png" alt="France" class="ui-li-icon">France</a></li> </ul> </div> </div> </body> </html>
例を実行する»
オンライン例を表示するには、[例を実行] ボタンをクリックします
標準 HTML を使用してリスト情報を追加します。
例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>包含缩略图的列表:</h2> <ul data-role="listview" data-inset="true"> <li> <a href="#"><img src="chrome.png"></a> </li> <li> <a href="#"><img src="firefox.png"></a> </li> </ul> </div> </div> </body> </html>
インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
jQueryモバイルリストアイコン
リストでclass="ui-li-icon"を使用します< ;img> 16x16px アイコンを追加する要素:
インスタンス
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>列表图标:</h2> <ul data-role="listview" data-inset="true"> <li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li> <li><a href="#"><img src="gb.png" alt="Great Britain" class="ui-li-icon">Great Britain</a></li> <li><a href="#"><img src="finland.png" alt="Finland" class="ui-li-icon">Finland</a></li> <li><a href="#"><img src="germany.png" alt="Germany" class="ui-li-icon">Germany</a></li> <li><a href="#"><img src="france.png" alt="France" class="ui-li-icon">France</a></li> </ul> </div> </div> </body> </html>
インスタンスを実行する»
「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します
分割ボタン
モバイルでは、コンテンツ操作に 2 つの異なるオプションを作成する必要がある場合があります。このとき、オプション内のリンク ボタンを分割する必要があります。セグメンテーションを実現するには、ページ上でセグメンテーション効果を実現できるように、別の 要素を
jQuery Mobile は 2 番目のリンクを青い矢印アイコンに自動的に設定し、ユーザーがマウスを置くとアイコンのリンク テキスト (存在する場合) が表示されます。 アイコンが表示されます:
インスタンス
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>拆分按钮</h2> <ul data-role="listview" data-inset="true"> <li> <a href="#"> <img src="chrome.png"> <h2>Google Chrome</h2> <p>Google Chrome 是免费的开源 web 浏览器。发布于 2008 年。</p> </a> <a href="#">文本信息</a> </li> <li> <a href="#"> <img src="firefox.png"> <h2>Mozilla Firefox</h2> <p>Firefox 是来自 Mozilla 的 web 浏览器。发布于 2004 年。</p> </a> <a href="#">文本信息</a> </li> </ul> </div> </div> </body> </html>
インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
いくつかのページとダイアログボックスを追加してリンク機能を強化します:
インスタンス
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>请点击齿轮图标！</h2> <ul data-role="listview" data-inset="true"> <li data-role="divider">浏览器</li> <li> <a href="#"> <img src="chrome.png"> <h2>Google Chrome</h2> <p>Google Chrome 是免费的开源 web 浏览器。发布于 2008 年。</p> </a> <a href="#download" data-transition="pop" data-icon="gear">下载浏览器</a> </li> <li> <a href="#"> <img src="firefox.png"> <h2>Mozilla Firefox</h2> <p>Firefox 是来自 Mozilla 的 web 浏览器。发布于 2004 年。</p> </a> <a href="#download" data-transition="pop" data-icon="gear">下载浏览器</a> </li> </ul> </div> </div> <div data-role="page" id="download" data-dialog="true"> <div data-role="main" class="ui-content"> <h3>拆分按钮实例</h3> <p>该按钮仅供演示。</p> <a href="#" class="ui-btn ui-btn-inline ui-btn-b ui-shadow ui-corner-all ui-icon-check ui-btn-icon-left ui-btn-inline ui-mini" data-rel="back">下载</a> <a href="#" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-inline ui-mini" data-rel="back">取消</a> </div> </div> </body> </html>
インスタンスの実行»
オンラインインスタンスを表示するには、「インスタンスの実行」ボタンをクリックしてください
バブル番号
バブル番号は、メールボックス内のメールなど、リスト項目に関連する番号を表示するために使用されます:
バブル番号を追加する必要がある場合は、<span> や set class などのインライン要素を使用してください。 「ui-li -count」属性を指定して数値を追加します:
インスタンス
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>我的邮箱</h2> <ul data-role="listview" data-inset="true"> <li><a href="#">收件箱<span class="ui-li-count">25</span></a></li> <li><a href="#">发件箱<span class="ui-li-count">432</span></a></li> <li><a href="#">垃圾箱<span class="ui-li-count">7</span></a></li> </ul> </div> </div> </body> </html>
インスタンスを実行する»
オンラインインスタンスを表示するには、「インスタンスを実行」ボタンをクリックします
注: バブル番号が正しい場合は、プログラミング方法を変更する必要があります。 これについては後の章で説明します。
その他の例
ポップアップリスト
ポップアップリストの作成方法
リスト項目のデフォルトのリンクアイコンを変更する
リスト項目のデフォルトのリンクアイコンを設定する方法(デフォルトは右矢印)
折りたたみ可能なポップアップ ウィンドウ リスト
折りたたみ可能なポップアップ リストを作成する方法。
折りたたみ可能なリスト
表示/非表示リストを作成する方法。
その他のコンテンツ形式
カレンダーの作成方法。
