# jQuery Mobile 列表內容  ## jQuery Mobile 列表縮略圖 大于 16x16px 的圖像，請在鏈接中添加 &lt;img&gt; 元素。 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 列表圖標 在列表 &lt;img&gt; 元素使用 class="ui-li-icon" 添加 16x16px 圖標： ## 實例 ``` <li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li> ``` ## 分割按鈕 在JQuery Mobile的列表中，有時需要對選項內容做兩個不同的操作，這時，需要對選項中的鏈接按鈕進行分割。實現分割的方法是在&lt;li&gt;元素中再增加一個&lt;a&gt;元素，便可以在頁面實現分割效果。 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> ``` ## 氣泡數字 氣泡數字是用來顯示列表項相關的數字，如在一個郵箱的郵件： 如需添加氣泡數字，請使用行內元素，比如 &lt;span&gt;，設置 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> ``` **注意：**顯示一個正確的氣泡數字，必須修改編程方式。 這將在以后的章節解釋。 ## 更多實例 [改變列表項的默認鏈接圖標](/try/try.php?filename=tryjqmob_lists_change_icons) 如何設置列表項的默認鏈接圖標(默認是右箭頭). [可折疊的列表](/try/try.php?filename=tryjqmob_lists_collapsible) 如何創建顯示/隱藏的列表。 [更多內容格式](/try/try.php?filename=tryjqmob_lists_formatting) 如何制作一個日歷。