VeryOK建站教程

jQuery Mobile 列表內容

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 列表圖標

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

實例

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

親自試一試

拆分按鈕

如需創建帶有垂直分隔欄的拆分列表,請在 <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>

親自試一試

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

更多實例

更改列表項的默認鏈接圖標
如何為列表項設置不同的鏈接圖標(右箭頭是默認的)。
可折疊列表
如何創建隱藏和顯示內容的列表。
更多內容格式
如何制作日歷。
江西时时彩交易时间