基本列表类型
-
普通链接列表
通过定义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
网友评论