jQuery Mobile 列表縮略圖
對(duì)于大于 16x16px 的圖像，請(qǐng)?jiān)阪溄又刑砑?<img> 元素。
jQuery Mobile 將自動(dòng)把圖像調(diào)整至 80x80px：
實(shí)例
<ul data-role="listview"> <li><a href="#"><img src="chrome.png"></a></li> </ul>
親自試一試
請(qǐng)使用標(biāo)準(zhǔn) HTML 來填充帶有信息的列表：
實(shí)例
<ul data-role="listview"> <li> <a href="#"> <img src="chrome.png"> <h2>Google Chrome</h2> <p>Google Chrome 免費(fèi)的開源 web 瀏覽器。發(fā)布于 2008 年。</p> </a> </li> </ul>
親自試一試
jQuery Mobile 列表圖標(biāo)
如需向您的列表添加 16x16px 的圖標(biāo)，請(qǐng)向 <img> 元素添加 class="ui-li-icon" 屬性：
實(shí)例
<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>
親自試一試
拆分按鈕
如需創(chuàng)建帶有垂直分隔欄的拆分列表，請(qǐng)?jiān)?<li> 元素內(nèi)放置兩個(gè)鏈接。
jQuery Mobile 會(huì)自動(dòng)為第二個(gè)鏈接添加藍(lán)色箭頭圖標(biāo)的樣式，鏈接中的文本（如有）將在用戶劃過該圖標(biāo)時(shí)顯示：
實(shí)例
<ul data-role="listview"> <li> <a href="#"><img src="chrome.png"></a> <a href="#">Some Text</a> </li> </ul>
親自試一試
通過添加頁面和對(duì)話框，可使鏈接的功能更強(qiáng)：
實(shí)例
<ul data-role="listview"> <li> <a href="#"><img src="chrome.png"></a> <a href="#download" data-rel="dialog">下載瀏覽器</a> </li> </ul>
親自試一試
計(jì)數(shù)泡沫
計(jì)數(shù)泡沫用于顯示與列表項(xiàng)相關(guān)的數(shù)目，例如郵箱中的消息：
如需添加計(jì)數(shù)泡沫，請(qǐng)使用行內(nèi)元素，比如 <span>，設(shè)置 class "ui-li-count" 屬性并添加數(shù)字：
實(shí)例
<ul data-role="listview"> <li><a href="#">Inbox<span class="ui-li-count">335</span></a></li> <li><a href="#">Sent<span class="ui-li-count">123</span></a></li> <li><a href="#">Trash<span class="ui-li-count">7</span></a></li> </ul>
親自試一試
注釋：如需在計(jì)數(shù)泡泡中顯示正確的數(shù)字，就必須進(jìn)行程序化更新。我們將在下一章種講解。