最新的Web開發教程
 

jQuery Mobile列表視圖



jQuery Mobile的列表視圖

在jQuery Mobile的列表視圖是標準的HTML列表; 有序的(<ol>)和無序(<ul>)

要創建一個列表,應用data-role="listview"<ol><ul>元素。 為了使項目tappable,指定每個列表項內的鏈接(<li>)

<ol data-role="listview" >
  <li><a href="#">List Item</a></li>
</ol>

<ul data-role="listview" >
  <li><a href="#">List Item</a></li>
</ul>
試一試»

與圓角和一些餘量的樣式表,使用data-inset="true"的屬性:

<ul data-role="listview" data-inset="true" >
試一試»

默認情況下,列表項中的鏈接會自動變成一個按鈕(不需要ui-class="btn"data-role="button"


清單分頻器

清單分頻器用於組織和團體項目分類/章節。

要指定列表分隔,添加data-role="list-divider"屬性的<li>元素:

<ul data-role="listview">
  <li data-role="list-divider" >Europe</li>
  <li><a href="#">Norway</a></li>
  <li><a href="#">Germany</a></li>
</ul>
試一試»

如果你有一個字母列表(例如電話簿)jQuery Mobile的自動設定數據autodividers =“真”的屬性上加上適當的分隔<ol><ul>元素:

<ul data-role="listview" data-autodividers="true" >
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Calvin</a></li>
  ...
</ul>
試一試»

該數據autodividers =“true”屬性創建了該項目文本的大寫的第一個字母的分隔。


例子

更多示例

只讀列表
如何創建無鏈接列表(不會按鈕,而不是tappable)。

面板
如何插入面板列表項。