jQueryのモバイルコンテンツ一覧
jQueryのモバイルリストのアイコン
デフォルトでは、各リスト項目は、矢印アイコン「カラット-R」(右矢印)が含まれています。 このアイコンを変更したい場合は、データ-icon属性を使用することができます。
例
<李> <a href="#">デフォルトは右矢印こちら</a>ます。</ li>であります
<李データ-アイコン= "プラス"> <a href="#">データ-アイコン= "プラス"する</a>ます。</ li>
<李データ-アイコン= "マイナス"> <aのhref="#">データ-アイコン= "マイナス"する</a>ます。</ li>
<李は、データアイコン= "削除"> <a href="#">データ-アイコン= </a>の</李>を "削除します"
<李データ-アイコン= "場所"> <aのhref="#">データ-アイコン= "場所"する</a>ます。</ li>
<李データ-アイコン= "偽"> <a href="#">データ-アイコン= "false"とする</a>ます。</ li>
</ UL>
»をお試しください
データ・アイコン= "false"のアイコンを削除します。 |
より完全なjQueryのモバイルボタンのアイコンは、私たちをご覧くださいjQueryのモバイルアイコンのリファレンスマニュアルを 。
16×16のアイコン
あなたが基準16x16pxアイコンのリストに追加したい場合は、リスト項目内の<img>要素を追加し、「UI-LI-アイコン」カテゴリを使用することができます。
例
<LI> <a href="#"> <IMG SRC = "us.png" ALT = "USA"クラス= "UI-LI-アイコン"> USAする</a>ます。</ li>
</ UL>
»をお試しください
jQueryのモバイルリストサムネイル
16x16pxよりも大きな画像、リンク内の<img>要素を追加します。
jQueryのモバイルは自動的に80x80pxに画像をスケーリングします。
情報のリストを追加するには、標準のHTMLを使用します。
例
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。</p>
</a>
</li>
</ul>
»をお試しください
jQueryのモバイルリストのアイコン
<IMG>要素のリストでは、クラス= "UI-LI-アイコンは「16x16pxの追加]アイコンを使用しています。
スプリットボタン
リスト内のjQueryのモバイルは、それが時には操作の内容のための2つの異なるオプションをする必要があり、その後、オプションの必要性は、ボタンのセグメンテーションをリンクします。 分割の方法は<a>要素を追加する<LI>要素を達成することで、ページを分割する効果を得ることができます。
jQueryのモバイルは、自動的にアイコンがユーザーにあるリンクテキストは(もしあれば)アイコンの上に置いたときに表示され、第2のリンク青色の矢印のアイコンを設定します:
例
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some Text</a>
</li>
</ul>
»をお試しください
リンクより機能豊富なを作るためにいくつかのページやダイアログボックスを追加します。
例
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download" data-rel="dialog">下载浏览器</a>
</li>
</ul>
»をお試しください
バブルデジタル
気泡数は、メールボックスのように、多数関連リスト項目を表示するために使用されます。
数字をクラス「UI-LI-カウント」属性を設定し、<span>のようなインライン要素を使用して、バブルの番号を追加し、追加するには:
例
<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>
»をお試しください
注:デジタルバブルの正しい表示は、あなたがプログラミングを変更する必要があります。 これは、後の章で説明します。
より多くの例
ポップリスト
ポップのリストを作成する方法
デフォルトのリンクアイコンリストの項目を変更します
デフォルトのリンクアイコンリストの項目を設定する方法(右矢印デフォルト)。
折りたたみポップリスト
ポップの折りたたみ可能なリストを作成する方法。
リスト折り畳み式
表示/非表示リストを作成する方法。
他のフォーマット
カレンダーを作成する方法。