列表标记的规约List markup conventions
1.基本的带连接的列表 Basic linked list
html代码
<li><a href="index.html">Acura</a></li>
<li><a href="index.html">Audi</a></li>
</ul>
效果图:
2.嵌套的列列表 Nested list
html代码
<li>Pets
<ul>
<li><a href="index.html">Canary</a></li>
<li><a href="index.html">Cat</a></li>
</ul>
</li>
<li>Farm animals
<ul>
<li><a href="index.html">Chicken</a></li>
<li><a href="index.html">Cow</a></li>
</ul>
</li>
</ul>
效果图:
3.数字排序的列表Numbered list
html代码
<li><a href="index.html">The Godfather</a></li>
<li><a href="index.html">Inception</a></li>
</ol>
效果图:
4.只读列表 Read-only list
html代码
<li>Acura</li>
<li>Audi</li>
</ul>
效果图:
5.拆分的按钮列表 Split button lists
html代码
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li>
<img src="images/album-bb.jpg" />
<h3><a href="index.html">Broken Bells</a></h3>
<p>Broken Bells</p>
<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
</li>
<li>
<img src="images/album-hc.jpg" />
<h3><a href="index.html">Warning</a></h3>
<p>Hot Chip</p>
<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
</li>
</ul>
效果图:
6.列表分割项 List dividers
html代码
<ul data-role="listview">
<li data-role="list-divider">A</li>
<li><a href="index.html">Adam Kinkaid</a></li>
<li><a href="index.html">Alex Wickerham</a></li>
<li><a href="index.html">Avery Johnson</a></li>
<li data-role="list-divider">B</li>
<li><a href="index.html">Bob Cabot</a></li>
</ul>
效果图:
7.搜索过滤框 Search filter
html代码
<ul data-role="listview" data-filter="true" >
<li><a href="index.html">Acura</a></li>
<li><a href="index.html">Audi</a></li>
</ul>
效果图:
8.文本格式和计数气泡 Text formatting & counts
- ? 将数字用一个元素包裹,并添加ui-li-count的class,放置于列表项内,可以给列表项右侧增加一个计数气泡 ;
- ? 要添加有层次关系的文本可以使用标题来强调,用段落文本来减少强调 ;
- ? 补充信息(比如日期)可以通过包裹在class="ui-li-aside"的容器中来添加到列表项的右侧 ;
html代码
<ul data-role="listview">
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
<li>
<h3><a href="index.html">Stephen Weber</a></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>
</li>
<li>
<h3><a href="index.html">Jquery Team</a></h3>
<p><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</li>
</ul>
效果图:
html代码
<ul data-role="listview">
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
</ul>
效果图:
9.列表项的缩略图与图标 Thumbnails & icons
html代码
<ul data-role="listview">
<li>
<img src="images/album-bb.jpg" />
<h3><a href="index.html">Broken Bells</a></h3>
<p>Broken Bells</p>
</li>
<li>
<img src="images/album-hc.jpg" />
<h3><a href="index.html">Warning</a></h3>
<p>Hot Chip</p>
</li>
</ul>
效果图:
html代码
<ul data-role="listview">
<li><img src="images/gf.png" alt="France" class="ui-li-icon"><a href="index.html">France</a> <span class="ui-li-count">4</span></li>
<li><img src="images/de.png" alt="Germany" class="ui-li-icon"><a href="index.html">Germany</a> <span class="ui-li-count">4</span></li>
</ul>
效果图:
10.内嵌的列表 Inset lists
html代码
<ul data-role="listview" data-filter="true" >
<li><a href="index.html">Acura</a></li>
<li><a href="index.html">Audi</a></li>
</ul>
效果图: