Jquery Mobile UI之列表的学习

写在前面：新手笔记，请高手指点

一、普通列表代码

<ul data-role="listview">
<li><a href="#点击跳转链接">增加职员</a></li>
<li><a href="#点击跳转链接">查找职员</a></li>
<li><a href="#点击跳转链接">职员通讯录</a></li>
<li><a href="#点击跳转链接">查看所有职员</a></li>
</ul>效果如下                                         

                                              


二、带有inset属性的列表

<ul data-role="listview" data-inset="true">
<li><a href="#">增加职员</a></li>
<li><a href="#">查找职员</a></li>
<li><a href="#">职员通讯录</a></li>
<li><a href="#">查看所有职员</a></li>
</ul>

三、带图标的列表
<ul data-role="listview" data-inset="true">
<li>
<a href="#"><img src="img/de.png" alt="德国" class="ui-li-icon" />德国</a>
</li>
<li>
<a href="#"><img src="img/gb.png" alt="英国" class="ui-li-icon" />英国</a>
</li>
<li>
<a href="#"><img src="img/us.png" alt="美国" class="ui-li-icon" />美国</a>
</li>
<li>
<a href="#"><img src="img/fi.png" alt="芬兰" class="ui-li-icon" />芬兰</a>
</li>
</ul> 效果如下(带inset属性)
                                                


四、带预览图的列表

<ul data-role="listview" style="padding: 1px;">
<li>
<a href="#"><img src="img/album-p.jpg" alt="iOS9大战安卓6.0" />
<h2>iOS9大战安卓6.0</h2>
<p>你更喜欢谁的设计风格</p>
</a>
</li>
<li>
<a href="#"><img src="img/album-ws.jpg" alt="iOS9大战安卓6.0" />
<h2>iOS9大战安卓6.0</h2>
<p>你更喜欢谁的设计风格</p>
</a>
</li>
<li>
<a href="#"><img src="img/album-af.jpg" alt="iOS9大战安卓6.0" />
<h2>iOS9大战安卓6.0</h2>
<p>你更喜欢谁的设计风格</p>
</a>
</li>
</ul>
                                                               



五、分隔效果的列表

<ul data-role="listview" data-split-icon="gear" data-inset="true" data-theme="b">
<li>
<a href="#"><img src="img/album-p.jpg" alt="iOS9大战安卓6.0" />
<h2>iOS9大战安卓6.0</h2>
<p>你更喜欢谁的设计风格</p>
</a>
<a href="#talk" data-rel="popup" data-position="window" data-transition="pop">参与</a>
</li>
<li>
<a href="#"><img src="img/album-ws.jpg" alt="iOS9大战安卓6.0" />
<h2>iOS9大战安卓6.0</h2>
<p>你更喜欢谁的设计风格</p>
</a>
<a href="#talk" data-rel="popup" data-position="window" data-transition="pop">参与</a>
</li>
<li>
<a href="#"><img src="img/album-af.jpg" alt="iOS9大战安卓6.0" />
<h2>iOS9大战安卓6.0</h2>
<p>你更喜欢谁的设计风格</p>
</a>
<a href="#talk" data-rel="popup" data-position="window" data-transition="pop">参与</a>
</li>
</ul>
    弹框代码：

<div id="talk" data-role="popup" data-theme="a" data-overlay-theme="b" class="ui-content" style="max-width:340px ;padding-bottom: 2em;">
<h3>参与讨论</h3>
<p>参与讨论参与讨论参与讨论参与讨论参与讨论参与讨论</p>
<a href="#" data-role="button" data-rel="back" data-theme="a" data-icon="check" data-inline="true" data-mini="true">提交</a>
<a href="#" data-role="button" data-rel="back" data-inline="true" data-mini="true">提交</a>
</div>                                                                    



六、分类列表

<ul data-role="listview" data-inset="true">
<li data-role="list-divider" data-theme="b">10份的新闻，事件，文件</li>
<li>
<a href="#">
<h2>iOS9大战安卓6.0</h2>
<p>你更喜欢谁的设计风格</p>
</a>
</li>
<li>
<a href="#">
<h2>iOS9大战安卓6.0</h2>
<p>你更喜欢谁的设计风格</p>
</a>
</li>
<li data-role="list-divider" data-theme="b">9份的新闻，事件，文件</li>
<li>
<a href="#">
<h2>iOS9大战安卓6.0</h2>
<p>你更喜欢谁的设计风格</p>
<p class="ui-li-aside"><strong>10:25</strong>AM</p>
</a>
</li>
</ul>                                                       



七、可折叠的列表

<div data-role="collapsible">
<h2>可折叠的按钮</h2>
<ul data-role="listview">
<li><a href="#">增加职员</a></li>
<li><a href="#">查找职员</a></li>
<li><a href="#">职员通讯录</a></li>
<li><a href="#">查看所有职员</a></li>
</ul>
</div>
                                                                    



八、数字提示列表

在上面例子的基础上更改li内容为

<li><a href="#">说说动态<span class="ui-li-count">27</span></a></li>