使用 jQuery Mobile 与 HTML5 开发 listView样式总结

 

1.只读列表

 

 

<h3 class="item-title">只读列表</h3>
<ul data-role="listview">
<li>列表项A</li>
<li>列表项B</li>
</ul>

2.基本列表

 

<h3 class="item-title">基本的列表</h3>
<ul data-role="listview">
<li><a href="#page2">列表项A</a></li>
<li><a href="#page2">列表项B</a></li>
</ul>

 3.数字排序列表

 

 

<h3 class="item-title">数字排序列表</h3>
        <ol data-role="listview"> 
            <li><a href="example3.html">The Godfather</a></li> 
            <li><a href="example3.html">Inception</a></li> 
            <li><a href="example3.html">The Good, the Bad and the Ugly </a></li> 
            <li><a href="example3.html">Pulp Fiction</a></li> 
            <li><a href="example3.html">Schindler's List</a></li> 
        </ol>

4.分隔列表

<h3 class="item-title">分割列表</h3>
<ul data-role="listview">
<li data-role="list-divider">老师</li>
<li><a href="#page2">老师A</a></li>
<li><a href="#page2">老师B</a></li>
<li data-role="list-divider">学生</li>
<li><a href="#page2">学生A</a></li>
<li><a href="#page2">学生B</a></li>
</ul>

5.拓展评论列表

<h3 class="item-title">拓展评论列表示例</h3>
<ul data-role="listview" data-split-icon="delete">
<li data-role="list-divider">评论列表<span class="ui-li-count">3</span></li>
<li>
<img src="images/0.png" />
<h3><a href="#page2">Reviewer A</a></h3>
<p>jQuery Mobile 很方便的把这类结构调整为你看到的这个样式</p>
<p class="ui-li-aside">2012-02-25 21:37</p>
</li>
<li>
<img src="images/1.png" />
<h3><a href="#page2">Reviewer B</a></h3>
<p>jQuery Mobile 很方便的把这类结构调整为你看到的这个样式</p>
<p class="ui-li-aside">2012-02-25 21:45</p>
</li>
<li>
<img src="images/2.png" />
<h3><a href="#page2">Reviewer C</a></h3>
<p>jQuery Mobile 很方便的把这类结构调整为你看到的这个样式</p>
<p class="ui-li-aside">2012-02-26 11:55</p>
</li>
</ul>

6.count列表

<h3>count列表</h3>
<ul data-role="listview">
<li style="padding:0;"><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
</ul>

 7.侧分列表

<h3 class="item-title">侧分列表</h3>
<ul data-role="listview" data-split-icon="delete">
<li>
<a href="#page2">
<img src="images/0.png" />
<h3>Reviewer A</h3>
<p>jQuery Mobile 很方便的把这类结构调整为你看到的这个样式</p>
</a>
<a href="#" data-rel="dialog">Delete</a>
</li>
<li>
<a href="#page2">
<img src="images/3.png" />
<h3>Reviewer B</h3>
<p>jQuery Mobile 很方便的把这类结构调整为你看到的这个样式</p>
</a>
<a href="#" data-rel="dialog">Delete</a>
</li>
<li>
<a href="#page2">
<img src="images/2.png" />
<h3>Reviewer C</h3>
<p>jQuery Mobile 很方便的把这类结构调整为你看到的这个样式</p>
</a>
<a href="#" data-rel="dialog">Delete</a>
</li>
</ul>

 8.过滤列表

<h3 class="item-title">过滤列表</h3>
<ul data-role="listview" data-filter="true">
　　<li><a href="#page2">你</a></li>
　　<li><a href="#page2">你好</a></li>
　　<li><a href="#page2">你好啊</a></li>
</ul>