jQuery Mobile 列表內(nèi)容
jQuery Mobile 列表縮略圖
默認(rèn)情況下每個(gè)jQuery Mobile列表項(xiàng)都會包含一個(gè)向右的箭頭圖標(biāo)。
大于 16x16px 的圖像，請?jiān)阪溄又刑砑?<img> 元素。
jQuery Mobile 將自動縮放圖像到 80x80px:
使用標(biāo)準(zhǔn)的HTML添加列表信息：
實(shí)例
<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)
在列表 <img> 元素使用 class="ui-li-icon" 添加 16x16px 圖標(biāo)：
分割按鈕
在JQuery Mobile的列表中，有時(shí)需要對選項(xiàng)內(nèi)容做兩個(gè)不同的操作，這時(shí)，需要對選項(xiàng)中的鏈接按鈕進(jìn)行分割。實(shí)現(xiàn)分割的方法是在<li>元素中再增加一個(gè)<a>元素，便可以在頁面實(shí)現(xiàn)分割效果。
jQuery Mobile 會自動設(shè)置第二個(gè)鏈接為藍(lán)色箭頭的圖標(biāo)，圖標(biāo)的鏈接文字（如果有的話）將在用戶將鼠標(biāo)懸停在 圖標(biāo)時(shí)顯示:
實(shí)例
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some Text</a>
</li>
</ul>
嘗試一下 ?
添加一些頁面和對話框使鏈接功能更加豐富：
實(shí)例
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download" data-rel="dialog">下載瀏覽器</a>
</li>
</ul>
嘗試一下 ?
氣泡數(shù)字
氣泡數(shù)字是用來顯示列表項(xiàng)相關(guān)的數(shù)字，如在一個(gè)郵箱的郵件：
如需添加氣泡數(shù)字，請使用行內(nèi)元素，比如 <span>，設(shè)置 class "ui-li-count" 屬性并添加數(shù)字：
實(shí)例
<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>
嘗試一下 ?
注意：顯示一個(gè)正確的氣泡數(shù)字，必須修改編程方式。 這將在以后的章節(jié)解釋。
更多實(shí)例
改變列表項(xiàng)的默認(rèn)鏈接圖標(biāo)
如何設(shè)置列表項(xiàng)的默認(rèn)鏈接圖標(biāo)(默認(rèn)是右箭頭).
可折疊的列表
如何創(chuàng)建顯示/隱藏的列表。
更多內(nèi)容格式
如何制作一個(gè)日歷。
有關(guān)jQuery Mobile列表內(nèi)容的介紹到此就結(jié)束了，在下一章中，我們將開始介紹jQuery Mobile表單。
更多建議：