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"的屬性:
默認情況下,列表項中的鏈接會自動變成一個按鈕(不需要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)。
面板
如何插入面板列表項。