最新のWeb開発のチュートリアル
 

jQuery Mobileリストビュー



jQueryのモバイルリストビュー

jQueryのモバイルでのリストビューは、標準のHTMLリストです。 注文した(<ol>)および順序なし(<ul>)

リストを作成するには、適用data-role="listview"<ol>または<ul>要素を。 アイテムをタップ可能にするために、各リスト項目の内部リンクを指定(<li>)

<ol data-role="listview" >
  <li><a href="#">List Item</a></li>
</ol>

<ul data-role="listview" >
  <li><a href="#">List Item</a></li>
</ul>
»それを自分で試してみてください

丸みを帯びたコーナーといくつかの余裕をもってあなたのリストのスタイルを設定するには、使用するdata-inset="true"属性を:

<ul data-role="listview" data-inset="true" >
»それを自分で試してみてください

デフォルトでは、リスト項目内のリンクは、自動的にボタン(の必要がないに変わりますui-class="btn"またはdata-role="button"


リストディバイダー

リストディバイダーは、カテゴリ/セクションに項目を整理し、グループに使用されます。

リスト分割器を指定するには、追加data-role="list-divider"に属性を<li>要素:

<ul data-role="listview">
  <li data-role="list-divider" >Europe</li>
  <li><a href="#">Norway</a></li>
  <li><a href="#">Germany</a></li>
</ul>
»それを自分で試してみてください

あなたがアルファベット順にリスト、(例えば電話帳)をお持ちの場合はjQuery Mobileは自動的にデータautodividers = "true"属性を設定することにより、適切な仕切りを追加し<ol>または<ul>要素:

<ul data-role="listview" data-autodividers="true" >
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Calvin</a></li>
  ...
</ul>
»それを自分で試してみてください

データ-autodividers = "true"属性は、項目のテキストの大文字最初の文字で仕切りを作成します。


例

その他の例

読み取り専用リスト
リンクせずにリストを作成する方法(ボタンではないとタップ可能ではないだろう)。

パネル
どのようにあなたのリスト項目にパネルを挿入します。