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>
<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 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>
<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>
<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>
<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>
<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>
<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>
<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>
注意：顯示一個正確的氣泡數字，必須修改編程方式。 這將在以後的章節解釋。
更多實例
彈窗列表
如何創建彈窗列表
改變列表項的默認鏈接圖示
如何設置列表項的默認鏈接圖示(默認是右箭頭).
可折疊彈窗列表
如何創建可折疊彈窗列表。
可折疊的列表
如何創建顯示/隱藏的列表。
更多內容格式
如何製作一個日曆。