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

jQuery Mobileリストの内容



jQueryのモバイルリストのアイコン

リンクを含む各リスト項目のデフォルトのアイコンがある"carat-r" (右矢印)。 別のアイコンにこれを変更するには、使用するdata-iconを変更したいリスト項目の属性を:

<ul data-role="listview">
  <li><a href="#">Default is right arrow</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>
»それを自分で試してみてください

data-icon="false"アイコンを削除します。

すべてのjQueryモバイルのボタンアイコンの完全なリファレンスについては、当社をご覧くださいjQueryのモバイルアイコンのリファレンス


16×16のアイコン

あなたのリストに標準16x16pxのアイコンを追加するには、追加<img> 「UI-LI-アイコン」のクラスとのリンクの内側の要素を:

<ul data-role="listview">
  <li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon" >USA</a></li>
</ul>
»それを自分で試してみてください

jQueryのモバイルリストサムネイル

16x16pxよりも大きい画像については、追加<img>なしクラス名を持つ)最初の子要素としてリスト項目の内部要素を。

jQueryのモバイルは、自動的に画像を拡大縮小します80x80px

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

情報のリストを埋めるために、標準のHTMLを使用します。

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
    </a>
  </li>
</ul>
»それを自分で試してみてください

スプリットボタン

垂直ディバイダバー付きのスプリットリストを作成するには、内部に2つのリンク配置<li>要素を。

jQueryのモバイルは、自動的に右にリストの右側にある第2のリンクが配置されますarrow-icon 。 そして、リンク(もしあれば)内のテキストが表示されますと、アイコンの上にユーザーホバー:

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#">Some Text</a>
  </li>
</ul>
»それを自分で試してみてください

リンクはより機能的にするためにいくつかのページやダイアログを追加することができます:

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#download" data-transition="pop" data-icon="gear">Download Browser</a>
  </li>
</ul>

<div data-role="page" id="download" data-dialog="true">
»それを自分で試してみてください

泡を数えます

カウント気泡は、このようなメールボックス内のメッセージのようなリスト項目に関連付けられた数字を表示するために使用されています。

カウントが泡を追加するには、次のような、インライン要素を使用して<span>クラスで"ui-li-count"と番号を追加します。

<ul data-role="listview">
  <li><a href="#">Inbox<span class="ui-li-count" >25</span></a></li>
  <li><a href="#">Sent<span class="ui-li-count" >432</span></a></li>
  <li><a href="#">Trash<span class="ui-li-count" >7</span></a></li>
</ul>
»それを自分で試してみてください

注:カウントバブルで正しい数を表示するには、それをプログラムで更新する必要があります。 これは、後の章で説明します。


その他の例

ポップアップリスト
どのようにポップアップリストを作成します。

折りたたみリスト
非表示にしてコンテンツを表示リストを作成する方法。

折りたたみポップアップリスト
どのように折りたたみ可能なポップアップリストを作成します。

全角折りたたみ可能なリスト
使用してdata-inset="false"上に属性を"collapsibles/collapsible set"全幅のリストビューを有効にします。

より多くのコンテンツの書式設定
どのようにカレンダーを作ります。