如 Kayo 之前所寫的文章 《 使用 jQuery Mobile 與 HTML5 開發 Web App —— jQuery Mobile 內容格式 》 中所述，這次介紹的是 jQuery Mobile 列表組件。 jQuery Mobile 列表雖然也是對頁面內容進行豐富，但 jQuery Mobile 列表會給標準的 HTML 賦予一套樣式以及豐富的交互處理，因此它是一套完整的組件，并且 jQuery Mobile 對其進行優化，使到 jQuery Mobile 列表成為易于觸摸的控件。下面對列表組件進行詳細的介紹。
?
一.基本的列表
要使用 jQuery Mobile 的列表組件非常簡單，只要在 ul, ol 中使用 data-role="listview" 屬性即可。
<ul data-role="listview">
<li><a href="#">列表項A</a></li>
<li><a href="#">列表項B</a></li>
</ul>
?
?
上面的代碼即可生成一個簡單的 jQuery Mobile 列表，效果如下圖所示（若是有序列表 ol ，則在列表項前會顯示對應的序號），另外列表項中若帶有鏈接，則會在列表項中添加一個向右的小箭頭。
?
二.嵌套的列表
在 ul, ol 中再次嵌入 ul, ol 可以生成嵌套列表，例如下面代碼所生成的即為嵌套列表
<ul data-role="listview">
<li>老師
<ul>
<li><a href="#home">老師A</a></li>
<li><a href="#home">老師B</a></li>
</ul>
</li>
<li>學生
<ul>
<li><a href="#home">學生A</a></li>
<li><a href="#home">學生B</a></li>
</ul>
</li>
</ul>
?
效果如下：
?
?
jQuery Mobile 會以最高級的列表項內容生成列表，點擊某列表項后會生成一個新的頁面，該頁面以被點擊項的文字內容生成一個 header ，并顯示子列表內容。具體的效果可以參見文章底部的 demo 。
?
三.只讀列表
上面的例子中，列表項都是帶鏈接的，其實 jQuery Mobile 也支持不帶鏈接的列表，較為常用的是在嵌套列表中嵌入一個不帶鏈接的列表，這種列表稱為只讀列表， jQuery Mobile 默認將列表樣式設置為 “c” 主題樣式（純白無漸變），并把字體字號設置成比可點擊的列表較小，以減小列表項大小。
<ul data-role="listview">
<li>列表項A</li>
<li>列表項B</li>
</ul>
?
?
?
四.列表項的縮略圖與圖標
jQuery Mobile 列表支持在列表項左側加入一幅圖片，只要在 li 標簽中添加一幅圖片并且作為第一子元素即可，圖片大小沒有限制， jQuery Mobile 會自動把圖片大小縮放為 80px 的正方形（當然實際上所用的圖片最好本身大小為 80px 的正方形）。例如，為一個移動版的論壇制作評論列表，正好適合使用這種結構，這時列表項的縮略圖是評論者的頭像。
<ul data-role="listview" data-split-icon="delete">
<li>
<img src="images/album-hc.jpg" />
<h3>Reviewer A</h3>
<p>jQuery Mobile 很方便的把這類結構調整為你看到的這個樣式</p>
</li>
<li>
<img src="images/album-p.jpg" />
<h3>Reviewer B</h3>
<p>jQuery Mobile 很方便的把這類結構調整為你看到的這個樣式</p>
</li>
<li>
<img src="images/album-ok.jpg" />
<h3>Reviewer B</h3>
<p>jQuery Mobile 很方便的把這類結構調整為你看到的這個樣式</p>
</li>
</ul>
?
?
則有如下效果：
?
?
五.側分列表
上面的基本例子中，因為列表項中帶有鏈接，所以點擊鏈接能觸發一個事件，若實際的項目中需要一個列表項帶有兩個操作，則需要另一種結構的列表，也就 是側分列表。這時習慣 PC Web 前端開發的開發者可能會覺得有點奇怪，為什么一個列表項需要多個操作交互，實際上列表這種結構在 Web App 類網頁中具有很多方面的用途，而不是只作為簡單的信息呈現。比如上面的“評論列表”示例， 我們可以在每條評論的右側添加一個刪除評論按鈕，這時則需要兩個交互按鈕——點擊左側為打開評論者鏈接（評論者主頁），點擊右側刪除評論。 jQuery Mobile 為這種結構提供了一種很方便的處理方式——在 li （或 ol）中加入第二個鏈接， jQuery Mobile 會創建一個豎直的分割線把第二個鏈接分隔開。
?
如下面的 HTML 結構：
<ul data-role="listview" data-split-icon="delete">
<li>
<a href="#page2">
<img src="images/album-hc.jpg" />
<h3>Reviewer A</h3>
<p>jQuery Mobile 很方便的把這類結構調整為你看到的這個樣式</p>
</a>
<a href="#" data-rel="dialog">Delete</a>
</li>
<li>
<a href="#page2">
<img src="images/album-p.jpg" />
<h3>Reviewer B</h3>
<p>jQuery Mobile 很方便的把這類結構調整為你看到的這個樣式</p>
</a>
<a href="#" data-rel="dialog">Delete</a>
</li>
<li>
<a href="#page2">
<img src="images/album-ok.jpg" />
<h3>Reviewer C</h3>
<p>jQuery Mobile 很方便的把這類結構調整為你看到的這個樣式</p>
</a>
<a href="#" data-rel="dialog">Delete</a>
</li>
</ul>
?
?
則有如下效果：
?
?
如效果圖所示， jQuery Mobile 會把兩個鏈接的內容以豎直分割線分開，并且第二個鏈接的文字內容會隱藏起來，以一個標準 Web 按鈕代替，標準 Web 按鈕的樣式可以在 ul 標簽上添加 data-split-icon 屬性指定，可取值可以參考 《 使用 jQuery Mobile 與 HTML5 開發 Web App —— jQuery Mobile 按鈕 》第二部分“帶圖標按鈕” 中 data-icon 的可取值。另外該按鈕的主題樣式可以通過在 ul 或 ol 標簽上添加 data-split-theme 屬性指定，默認為"b"（藍）。
?
六.分割列表
分割列表從效果上來看是一種分組列表，而在 HTML 結構上，它與基本列表相同，只是通過 data-role="list-divider" 屬性把基本列表轉化為分割列表，貌似有點復雜？其實看了下面的代碼和效果圖就會一目了然。
?
HTML 代碼：
<ul data-role="listview">
<li data-role="list-divider">老師</li>
<li><a href="#page2">老師A</a></li>
<li><a href="#page2">老師B</a></li>
<li data-role="list-divider">學生</li>
<li><a href="#page2">學生A</a></li>
<li><a href="#page2">學生B</a></li>
</ul>
?
?
?
默認情況下分割列表的主題樣式為"b"（藍），開發者可以通過在 ul 或 ol 標簽上添加 data-split-theme 屬性指定主題樣式。
?
七.搜索過濾框
jQuery Mobile 給開發者提供了一種簡便的過濾列表方式，若需要過濾列表只需在 ul 或 ol 標簽上添加 data-filter="true" 屬性即可。 jQuery Mobile 會自動在列表頂部添加一個搜索框，當用戶在搜索框中輸入字符時， jQuery Mobile 會自動過濾掉不包含這些字符的列表項。值得注意的是，這個過濾是 Ajax 模式的過濾方式，它不需要等待整個輸入完成才開始過濾，每當用戶輸入字符時， jQuery Mobile 會即時過濾掉不包含這些字符的列表項。
<ul data-role="listview" data-filter="true">
<li><a href="#page2">你</a></li>
<li><a href="#page2">你好</a></li>
<li><a href="#page2">你好啊</a></li>
</ul>
?
?
八.其他
jQuery Mobile 支持通過使用語義化的標簽來顯示列表項中一些常用的信息，如上面的“列表項的縮略圖與圖標”和“側分列表”中，列表項中除了描述外還有標題， jQuery Mobile 會按照標題的標簽語義處理成不同的文字樣式，這里 Kayo 再以“評論列表”示例進行拓展說明。
?
如下的代碼：
<ul data-role="listview" data-split-icon="delete">
<li data-role="list-divider">評論列表<span class="ui-li-count">3</span></li>
<li>
<img src="images/album-hc.jpg" />
<h3><a href="#page2">Reviewer A</a></h3>
<p>jQuery Mobile 很方便的把這類結構調整為你看到的這個樣式</p>
<p class="ui-li-aside">2012-02-25 21:37</p>
</li>
<li>
<img src="images/album-p.jpg" />
<h3><a href="#page2">Reviewer B</a></h3>
<p>jQuery Mobile 很方便的把這類結構調整為你看到的這個樣式</p>
<p class="ui-li-aside">2012-02-25 21:45</p>
</li>
<li>
<img src="images/album-ok.jpg" />
<h3><a href="#page2">Reviewer B</a></h3>
<p>jQuery Mobile 很方便的把這類結構調整為你看到的這個樣式</p>
<p class="ui-li-aside">2012-02-26 11:55</p>
</li>
</ul>
?
效果圖：
?
?
備注：
?
這個例子中， Kayo 把評論中的“刪除”按鈕舍棄，改為顯示評論時間，這時的評論列表更接近于博客的評論列表，以 h3 標簽包含評論者名稱，表示對評論者的強調， p 標簽則包含評論內容，并且把評論者的鏈接（評論者主頁）從側分列表中的整個左側都帶鏈接改為只是評論者名稱帶鏈接。下面再具體說明一下：
?
- 使用容器包裹數字，為該容器添加 ui-li-count 的 class 并添加到列表項中， jQuery Mobile 會自動為該容器添加氣泡樣式用于表示計數。
- 在語義上層次不同的文本 jQuery Mobile 會以不同大小，粗細的字體顯示該段文字，以表示文字重要性的不同。
- 補充信息可以用 class 為 ui-li-aside 的容器包裹并放在列表項的下方（如示例中的評論日期）， jQuery Mobile 會自動把它呈現在列表項的右側（這時不能使用側分列表，因為側分列表右側需要顯示列表項中的第二個鏈接）。
?
九.完整 Demo
完整實例 Demo （建議使用 PC 上的 Firefox、Chrome 等現代瀏覽器和 IE9+ 或 Android , iPhone/iPad 的系統瀏覽器瀏覽）。
?
?
原文由 Kayo Lee 發表，原文鏈接： http://kayosite.com/web-app-by-jquery-mobile-and-html5-list-views.html
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
