HTML5 经量级框架 jQuery Mobile List 列表 - 7.8

<!-- 1.普通链接列表 -->

<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>

<li><a href="#">List 5</a></li>

</ul>

<!-- 2.多层次嵌套列表 -->

<ul data-role="listview" data-theme="g">

<li>

<a href="#">List 1</a>

<p>这是第一层</p>

<ul data-role="listview" data-theme="g">

<li><a href="#">List 1 1</a></li>

<li><a href="#">List 1 2 </a></li>

<li><a href="#">List 1 3</a></li>

<li><a href="#">List 1 4</a></li>

<li><a href="#">List 1 5</a></li>

</ul>

</li>

<li><a href="#">List 2</a></li>

<li><a href="#">List 3</a></li>

<li><a href="#">List 4</a></li>

<li><a href="#">List 5</a></li>

</ul>

<!-- 3.有序编号列表 -->

<ol 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>

<li><a href="#">List 5</a></li>

</ol>

<!-- 4.只读模式列表 -->

<ul data-role="listview" data-inset="true">

<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>

<li><a href="#">List 5</a></li>

</ul>

<!-- 5.可分割按钮列表 -->

<ul data-role="listview" data-theme="g" data-split-icon="gear" data-split-theme="d">

<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>

<li><a href="#">List 5</a></li>

</ul>

<!-- 6.列表分隔符 -->

<ul data-role="listview" data-inset="true">

<li data-role="list-divider">A</li>

<li><a href="#">List 1-1</a></li>

<li><a href="#">List 1-2</a></li>

<li data-role="list-divider">B</li>

<li><a href="#">List 2-1</a></li>

<li><a href="#">List 2-2</a></li>

<li data-role="list-divider">C</li>

<li><a href="#">List 3-5</a></li>

<li><a href="#">List 3-5</a></li>

</ul>

<!-- 7.列表搜索过滤器 -->

<ul data-role="listview" data-theme="g" data-filter="true">

<li><a href="#">aaaa</a></li>

<li><a href="#">abb</a></li>

<li><a href="#">bb</a></li>

<li><a href="#">bc</a></li>

<li><a href="#">cc</a></li>

</ul>

<!-- 8.气泡计数列表 -->

<ul data-role="listview" data-theme="g">

<li>

<a href="#">aaa</a>

<span class="ui-li-count">33</span>

</li>

<li>

<a href="#">bbb</a>

<span class="ui-li-count">2</span>

</li>

<li>

<a href="#">ccc</a>

<span class="ui-li-count">12</span>

</li>

<li>

<a href="#">dddd</a>

<span class="ui-li-count">54</span>

</li>

</ul>

<!-- 9.显示列表项右侧文本列表 -->

<ul data-role="listview" data-theme="g">

<li>

<a href="#">aaa</a>

<span class="ui-li-aside">熬啊</span>

</li>

<li>

<a href="#">bbb</a>

<span class="ui-li-aside">版本</span>

</li>

<li>

<a href="#">ccc</a>

<span class="ui-li-aside">呃呃</span>

</li>

<li>

<a href="#">dddd</a>

<span class="ui-li-aside">请求</span>

</li>

</ul>

<!-- 10.列表项含有图片列表 -->

<ul data-role="listview" data-theme="g">

<li>

<img src="gf.png" alt="france" class="ui-li-icon" />

<a href="#">aaa</a>

<span class="ui-li-count">33</span>

</li>

<li>

<img src="gf.png" alt="france" class="ui-li-icon" />

<a href="#">bbb</a>

<span class="ui-li-count">2</span>

</li>

<li>

<img src="gf.png" alt="france" class="ui-li-icon" />

<a href="#">ccc</a>

<span class="ui-li-count">12</span>

</li>

<li>

<img src="gf.png" alt="france" class="ui-li-icon" />

<a href="#">dddd</a>

<span class="ui-li-count">54</span>

</li>

</ul>

<!-- 11.列表项还有图片列表 -->

<ul data-role="listview" data-theme="g">

<li>

<img src="gf.png"/>

<a href="#">aaa</a>

<span class="ui-li-count">33</span>

</li>

<li>

<img src="gf.png"/>

<a href="#">bbb</a>

<span class="ui-li-count">2</span>

</li>

<li>

<img src="gf.png"/>

<a href="#">ccc</a>

<span class="ui-li-count">12</span>

</li>

<li>

<img src="gf.png"/>

<a href="#">dddd</a>

<span class="ui-li-count">54</span>

</li>

</ul>

<!-- 12.内嵌列表 -->

<ul data-role="listview" data-theme="g" data-inset="true">

<li><a href="#">List 1</a><span class="ui-li-count">54</span></li>

<li><a href="#">List 2</a><span class="ui-li-count">54</span></li>

</ul>

<ol data-role="listview" data-theme="g" data-inset="true">

<li><a href="#">List 1</a></li>

<li><a href="#">List 2</a></li>

<li><a href="#">List 3</a></li>

</ol>

<ul data-role="listview" data-theme="g" data-inset="true">

<li><a href="#">List 1</a></li>

<li><a href="#">List 2</a></li>

<li><a href="#">List 3</a></li>

</ul>