Latest web development tutorials

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



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

(<OL>)注文し、順序付けられていない(<UL>);リストビューでのjQuery Mobileは、標準のHTMLリストです。

リストビューではJQuery Mobileは強力な機能です。 これは、より広く、標準順不同または番号付きリストを作成します。 法の適用は、データ役割= "リストビュー"プロパティULやOLのタグを追加することです。 各項目(<LI>)上のリンクを追加し、ユーザーがそれをクリックすることができます。

<ol data-role="listview" >
<li><a href="#">列表项m</a></li>
</ol>

<ul data-role="listview" >
<li><a href="#">列表项</a></li>
</ul>

»をお試しください

リストスタイルと丸いエッジ、設定データはめ込み= "true"属性を使用します:

<ul data-role="listview" data-inset="true" >

»をお試しください

ランプ デフォルトでは、リンクされたリスト項目が自動的にボタン(データなし-役割= "ボタン")になります。


区切りのリスト

リスト項目はグループにリスト、リストの項目を整理するために、リスト項目の分割に変換することができます。

データ-役割= "リスト分圧器」プロパティを追加するには、指定されたリストのセグメンテーション、項目をリストする<LI>要素:

<ul data-role="listview">
<li data-role="list-divider" >欧洲</li>
<li><a href="#">法国</a></li>
<li><a href="#">德国</a></li>
</ul>

»をお試しください

あなたは<OL>によって(例えば電話帳など)アルファベット順のリストを持っているか、<UL>要素のデータ-autodividers = "true"属性セットが自動的にプロジェクトのパーティションを生成するように構成することができる場合:

<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"が自動的に分離されたアイテムを生成するように構成することができます。 デフォルトでは、大文字を作成するための区切りのテキストは、最初のリスト項目のテキストです。

例

より多くの例

読み取り専用リスト
リンクせずにリストを作成する方法(ないボタンはクリックできません)。

パネル
リスト内のパネルを挿入する方法