HTML 5モバイルWebアプリケーションの開発—JQuery Mobile(3)-リスト

Jquery Mobileでは作成リストの作成が提供されており、data-viewはlistviewである.次のような典型的なJquery Mobileのリストです.

<div data-role="page"id="pageone">
 <div data-role="content">
   <h2>    ：</h2>
   <ol data-role="listview">
     <li><a href="#">   </a></li>
     <li><a href="#">   </a></li>
     <li><a href="#">   </a></li>
   </ol>
   <h2>    ：</h2>
   <ul data-role="listview">
     <li><a href="#">   </a></li>
     <li><a href="#">   </a></li>
     <li><a href="#">   </a></li>
   </ul>
 </div>
</div>

シーケンステーブル(ul)と無秩序リスト(ol)の2種類のリストを定義した.この2つのリストの定義はHTMLと同じで、対応するラベルにdata-role=「listview」属性を追加すればよい.
これらの最も基本的な機能に加えて、Jquery Mobileでカスタマイズされたスタイルや機能を追加し続けることができます.次のコードでは、data-insetプロパティを使用して、リストにフィレットと外側距離を追加します.

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

コンテンツをグループ化したリストをよく見ます.つまり、同じリストのオプションが同じ大きなタイトルの下に置かれています.Jquery Mobileでは、list-divider:

<ul data-role="listview">
 <li data-role="list-divider">  </li>
 <li><a href="#">  </a></li>
 <li><a href="#">  </a></li>
</ul>

自動ソートを設定できます.たとえば、すべてのアルファベットがautodividersを介して自動的にアルファベットでソートできます.コードは次のとおりです.

<ul data-role="listview"data-autodividers="true">
 <li><a href="#">Adam</a></li>
 <li><a href="#">Angela</a></li>
 <li><a href="#">Bill</a></li>
 <li><a href="#">Calvin</a></li>
  ...
</ul>

リストに検索機能を追加する場合は、data-filterプロパティをtrueに設定すると、リストはユーザーが入力した情報に基づいて削除後の結果を自動的に表示します.このセットのdata-filter-placeholderでは、検索ボックスのデフォルトプレースホルダを設定できます.

<ul data-role="listview"data-filter="true" data-filter-placeholder="    ">

jquery Mobileでは、リストにピクチャを追加すると、ピクチャは自動的にリストのサイズに適応し、80*80ピクセルになります.コードは以下の通りです.

<ul data-role="listview">
 <li><a href="#"><img src="chrome.png"></a></li>
</ul>

16*16 pxの小さなアイコンを使用する場合は、imgのclassにui-li-iconを追加します.

<li><a href="#"><imgsrc="us.png" alt="USA"class="ui-li-icon">USA</a></li>

最後に、現在携帯電話で流行しているリスト数のヒント効果は、Jquery Mobileで実現することもできます.コードは以下の通りです.

<ul data-role="listview">
 <li><a href="#">Inbox<spanclass="ui-li-count">335</span></a></li>
 <li><a href="#">Sent<spanclass="ui-li-count">123</span></a></li>
 <li><a href="#">Trash<spanclass="ui-li-count">7</span></a></li>
</ul>