Latest web development tutorials

jQueryのモバイルコンテンツ一覧


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

デフォルトでは、各リスト項目は、矢印アイコン「カラット-R」(右矢印)が含まれています。 このアイコンを変更したい場合は、データ-icon属性を使用することができます。

<ULデータ-役割= "リストビュー">
<李> <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-アイコン」カテゴリを使用することができます。

<ULデータ-役割= "リストビュー">
<LI> <a href="#"> <IMG SRC = "us.png" ALT = "USA"クラス= "UI-LI-アイコン"> 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 免费的开源 web 浏览器。发布于 2008 年。</p>
</a>
</li>
</ul>

»をお試しください


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

<IMG>要素のリストでは、クラス= "UI-LI-アイコンは「16x16pxの追加]アイコンを使用しています。

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

»をお試しください


スプリットボタン

リスト内のjQueryのモバイルは、それが時には操作の内容のための2つの異なるオプションをする必要があり、その後、オプションの必要性は、ボタンのセグメンテーションをリンクします。 分割の方法は<a>要素を追加する<LI>要素を達成することで、ページを分割する効果を得ることができます。

jQueryのモバイルは、自動的にアイコンがユーザーにあるリンクテキストは(もしあれば)アイコンの上に置いたときに表示され、第2のリンク青色の矢印のアイコンを設定します:

<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-rel="dialog">下载浏览器</a>
</li>
</ul>

»をお試しください


バブルデジタル

気泡数は、メールボックスのように、多数関連リスト項目を表示するために使用されます。

数字をクラス「UI-LI-カウント」属性を設定し、<span>のようなインライン要素を使用して、バブルの番号を追加し、追加するには:

<ul data-role="listview">
<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>

»をお試しください

注:デジタルバブルの正しい表示は、あなたがプログラミングを変更する必要があります。 これは、後の章で説明します。


例

より多くの例

ポップリスト
ポップのリストを作成する方法

デフォルトのリンクアイコンリストの項目を変更します
デフォルトのリンクアイコンリストの項目を設定する方法(右矢印デフォルト)。

折りたたみポップリスト
ポップの折りたたみ可能なリストを作成する方法。

リスト折り畳み式
表示/非表示リストを作成する方法。

他のフォーマット
カレンダーを作成する方法。