jQuery Mobile 列表

jQuery Mobile 列表視圖
1.如需創建列表，請向 <ol> 或 <ul> 元素添加 data-role=”listview“。如需使這些項目可點擊，請在每個列表項（<li>）中規定鏈接。

提示：默認地，列表中的列表項會自動轉換爲按鈕（無需 data-role=”button”）

2.列表分隔符
列表分隔符（List Dividers）用於把項目組織和組合爲分類/節, 如需規定列表分隔符，請向

元素添加 data-role=”list-divider” 屬性

 <ol data-role="listview" data-inset="true">
    <li data-role="list-divider">廣東</li>
    <li><a href="#">廣州</a></li>
    <li><a href="#">深圳</a></li>
 </ol> 

3.給列表添加搜索框功能: data-filter=”true”

<ol data-role="listview" data-filter="true" data-filter-placeholder="請輸入姓名" data-inset="true">
    <li data-role="list-divider">廣東</li>
    <li><a href="#">廣州</a></li>
    <li><a href="#">深圳</a></li>
    <li><a href="#">珠海</a></li>
</ol>

jQuery Mobile 列表內容
1.列表縮略圖
對於大於 16x16px 的圖像，請在鏈接中添加 <img> 元素, jQuery Mobile 將自動把圖像調整至 80x80px。

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="images/luffy.jpg">
    <h2>Google Chrome</h2>
    <p>Google Chrome 免費的開源 web 瀏覽器。發佈於 2008 年。</p>
    </a>
  </li>
</ul>

2.計數泡沫:請使用行內元素，比如 <span>設置 class=”ui-li-count” 屬性並添加數字

<div data-role="content">
    <h2>我的郵箱</h2>
    <ul data-role="listview" data-inset="true">
      <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>
  </div>

註釋：如需在計數泡泡中顯示正確的數字，就必須進行程序化更新

根據下面博客，對知識內容進行整理。
原文地址：http://www.cnblogs.com/jxyedu/p/5099447.html