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 瀏覽器。發(fā)布于 2008 年。</p>
    </a>
  </li>
</ul>

親自試一試

jQuery Mobile 列表圖標

如需向您的列表添加 16x16px 的圖標，請向 <img> 元素添加 class="ui-li-icon" 屬性：

實例

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

親自試一試

拆分按鈕

如需創(chuàng)建帶有垂直分隔欄的拆分列表，請在 <li> 元素內放置兩個鏈接。

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="#">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>

親自試一試

注釋：如需在計數泡泡中顯示正確的數字，就必須進行程序化更新。我們將在下一章種講解。