Latest web development tutorials

jQuery Mobile 列表內容


jQuery Mobile 列表圖標

默認情況下每個列表項都會包含一個箭頭圖標"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>

嘗試一下»
Note data-icon="false" 將會移除圖標。

更完整的jQuery Mobile按鈕圖標,請訪問我們的jQuery Mobile圖標參考手冊


16x16 圖標

如果你想在你的列表添加標準的16x16px 的圖標, 可以在列表項中添加<img> 元素,並使用"ui-li-icon" 類:

實例

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

嘗試一下»

jQuery Mobile 列表縮略圖

大於16x16px 的圖像,請在鏈接中添加<img> 元素。

jQuery Mobile 將自動縮放圖像到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 Mobile 列表圖標

在列表<img> 元素使用class="ui-li-icon" 添加16x16px 圖標:

實例

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

嘗試一下»


分割按鈕

在JQuery Mobile的列表中,有時需要對選項內容做兩個不同的操作,這時,需要對選項中的鏈接按鈕進行分割。 實現分割的方法是在<li>元素中再增加一個<a>元素,便可以在頁面實現分割效果。

jQuery Mobile 會自動設置第二個鏈接為藍色箭頭的圖標,圖標的鏈接文字(如果有的話)將在用戶將鼠標懸停在圖標時顯示:

實例

<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>

嘗試一下»


氣泡數字

氣泡數字是用來顯示列表項相關的數字,如在一個郵箱的郵件:

如需添加氣泡數字,請使用行內元素,比如<span>,設置class "ui-li-count" 屬性並添加數字:

實例

<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>

嘗試一下»

注意:顯示一個正確的氣泡數字,必須修改編程方式。 這將在以後的章節解釋。


實例

更多實例

彈窗列表
如何創建彈窗列表

改變列表項的默認鏈接圖標
如何設置列表項的默認鏈接圖標(默認是右箭頭).

可折疊彈窗列表
如何創建可折疊彈窗列表。

可折疊的列表
如何創建顯示/隱藏的列表。

更多內容格式
如何製作一個日曆。