基本列表類型
-
普通鏈接列表
通過定義data-role屬性為listview，jqm會自動將需要的列表樣式加入到列表上。
<div data-role="page">
<header data-role="header">
<h1>列表測試頁面</h1>
</header>
<div data-role="content">
<ul data-role="listview" data-theme="g">
<li><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
<li><a href="#">List 4</a></li>
</ul>
</div>
<footer data-role="footer">
<h1>頁面底部</h1>
</footer>
</div>
Paste_Image.png 多層次嵌套列表
有序編號列表
ul元素替換為ol元素即可可分割按鈕列表
<ul data-role="listview" data-split-icon="gear" data-split-theme="b" data-theme="g">
<li>
<a href="#">List 1</a>
<a href="#"></a>
</li>
<li>
<a href="#">List 2</a>
<a href="#"></a>
</li>
<li>
<a href="#">List 3</a>
<a href="#"></a>
</li>
<li>
<a href="#">List 4</a>
<a href="#"></a>
</li>
</ul>
Paste_Image.png
- 列表分隔符
<ul data-role="listview" data-theme="g">
<li data-role="list-divider" data-theme="b">A</li>
<li><a href="#">Apple</a></li>
<li data-role="list-divider" data-theme="b">B</li>
<li><a href="#">Banana</a></li>
<li><a href="#">Ball</a></li>
<li data-role="list-divider" data-theme="b">C</li>
<li><a href="#">Cups</a></li>
<li data-role="list-divider" data-theme="b">D</li>
<li><a href="#">Desk</a></li>
<li><a href="#">Dession 1</a></li>
<li><a href="#">Dertarl</a></li>
</ul>
Paste_Image.png
- 列表搜索過濾器
ul元素設置data-filter屬性為true，列表上方會動態增加一個搜索文本框，只能搜索當前列表數據項，如果需要搜索后端數據并顯示到頁面，需要自行編寫實現邏輯
Paste_Image.png
- 氣泡式計數列表
每個li元素中定義要給span元素，并指定class屬性值為ui-li-count，就可以在列表項的右側增加一個含數字的氣泡。
<li>
<a href="#">Apple
<span class="ui-li-count">20</span>
</a>
</li>
Paste_Image.png
- 顯示列表項右側文本列表
<li>
<a href="#">Apple
<p class="ui-li-aside">vice good</p>
</a>
</li>
Paste_Image.png
- 列表項含有圖標的列表
<li>
<a href="#"><img src="images/sf.jpg" alt="France" class="ui-li-icon">Apple</a>
</li>
Paste_Image.png
- 列表項含有圖片的列表
<li><a href="#">
<img src="images/p1.jpg">
<h2>Broken Bells</h2>
<p>Broken Bells</p></a>
</li>
Paste_Image.png
- 內嵌列表
<div data-role="content">
<ul data-role="listview" data-theme="b" data-inset="true">
<li><a href="#">List 1<span class="ui-li-count">33</span></a></li>
<li><a href="#">List 2<span class="ui-li-count">15</span></a></li>
<li><a href="#">List 3<span class="ui-li-count">60</span></a></li>
</ul>
<ol data-role="listview" data-theme="c" data-inset="true">
<li><a href="#">List 1<span class="ui-li-count">33</span></a></li>
<li><a href="#">List 2<span class="ui-li-count">15</span></a></li>
<li><a href="#">List 3<span class="ui-li-count">60</span></a></li>
</ol>
</div>
Paste_Image.png
- 可折疊列表
<div data-role="content">
<div data-role="collapsibleset" data-theme="a" data-content-theme="b">
<div data-role="collapsible">
<h2>Filtered list</h2>
<ul data-role="listview" data-filter="true" data-filter-theme="a" data-divider-theme="b">
<li><a href="#">Adam Kinkaid</a></li>
<li><a href="#">Alex Wickerham</a></li>
</ul>
</div>
<div data-role="collapsible">
<h2>Formatted text</h2>
<ul data-role="listview" data-theme="a" data-divider-theme="b">
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
<li><a href="#">
<h3>Stephen Weber</h3>
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
</a></li>
</ul>
</div>
<div data-role="collapsible">
<h2>Thumbnails and split button</h2>
<ul data-role="listview" data-split-icon="gear" data-split-theme="a">
</ul>
</div>
</div>
</div>
Paste_Image.png
