jQuery Mobile 中的列表视图是标准的HTML 列表; 有序(<ol>) 和 无序(<ul>).
列表视图 ：是在ul或ol标签中添加 data-role="listview" 属性。在每个项目(<li>)中添加链接，用户可以点击它：
1、基础列表
<div data-role="page" id="page1">
<div data-role="header">
<h1>列表</h1>
</div>
<div data-role="main" class="ui-content">
<ul data-role="listview" >
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
</ul>
</div>
<div data-role="footer">
</div>
</div>
2、带序号的列表
使用 ol 替换 ul 即可
3、 data-inset="true"，为列表加外框，且上下左右有距离。
<ul data-role="listview" data-inset="true">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
</ul>
4.带图标的列表
<img src="images/gf.png" alt="France" class="ui-li-icon"> 在链接里面加 img
1. Icons: 16x16 小图标 :在<img>中加入 ：class="ui-li-icon"
<ul data-role="listview" data-inset="true">
<li><a href="#"><img src="a.jpg" class="ui-li-icon" />16x16 的小图标</a></li>
<li><a href="#"><img src="a.jpg" class="ui-li-icon" />16x16 的小图标</a></li>
<li><a href="#"><img src="a.jpg" class="ui-li-icon" />16x16 的小图标</a></li>
</ul>
5.图文列表：图片占位宽度一定，要调整图片比例
<ul data-role="listview" data-inset="true">
<li>
<a href="#"><img src="a.jpg"/>
<h2>带图片的列表</h2>
<p>Broken Bells</p></a>
</li>
<li>
<a href="#"><img src="b窄一点.png"/>
<h2>带图片的列表</h2>
<p>Broken Bells</p></a>
</li>
</ul>
6、修改列表的图标
<ul data-role="listview" data-inset="true">
<li><a href="#">默认是右箭头</a></li>
<li data-icon="plus"><a href="#">data-icon="plus"</a></li>
<li data-icon="minus"><a href="#">data-icon="minus"</a></li>
<li data-icon="delete"><a href="#">data-icon="delete"</a></li>
<li data-icon="location"><a href="#">data-icon="location"</a></li>
<li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>
7、带分隔的列表
1、分割按钮：
1、在<ul>中加入 data-split-icon="gear" 修改默认图标的箭头
2、实现分割的方法是在<li>元素中再增加一个<a>元素，便可以在页面实现分割效果。
jQuery Mobile 会自动设置第二个链接为蓝色箭头的图标，图标的链接文字（如果有的话）将在用户将鼠标悬停在 图标时显示:
<ul data-role="listview" data-split-icon="plus" data-inset="true">
<li>
<a href="#">
<img src="b窄一点.png">
<h2>分割按钮</h2>
<p>Broken Bells</p>
</a>
<a href="#">放置图标处</a>
</li>
<li>
<a href="#">
<img src="a.jpg">
<h2>Warning</h2>
<p>Hot Chip</p>
</a>
<a href="#"></a>
</li>
<li>
<a href="#">
<img src="a.jpg">
<h2>Wolfgang Amadeus Phoenix</h2>
<p>Phoenix</p>
</a>
<a href="#"></a>
</li>
</ul>
在<ul>中设置 data-theme="b"背景可以变黑。
3、点击分割按钮跳出弹框
1、在分隔的 <a>标签内做如下改动
<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop"></a>
- 链接到要弹出的框：href="#purchase"
- 在 <a> 元素上添加 data-rel="popup" 属性
- 定位窗口 : data-position-to="window"
- 设置弹出窗口<div data-role="popup" id="myPopup">
- 按钮上使用 data-rel="back" 属性 关闭弹窗
- 背景微黑 :data-overlay-theme="b" ;默认情况下覆盖的背景色的透明的。使用 data-overlay-theme="a" 添加浅色背景，使用 data-overlay-theme="b" 添加深色的覆盖背景：
<ul data-role="listview" data-split-icon="plus" data-inset="true" data-theme="b">
<li>
<a href="#">
<img src="b窄一点.png">
<h2>分割按钮</h2>
<p>Broken Bells</p>
</a>
<a href="#purchase" data-rel="popup" data-position-to="window"
data-transition="pop">Purchase album</a>
</li>
<li>
<a href="#">
<img src="a.jpg">
<h2>Warning</h2>
<p>Hot Chip</p>
</a>
<a href="#purchase" data-rel="popup" data-position-to="window"
data-transition="pop"></a>
</li>
<li>
<a href="#">
<img src="a.jpg">
<h2>Wolfgang Amadeus Phoenix</h2>
<p>Phoenix</p>
</a>
<a href="#purchase" data-rel="popup" data-position-to="window"
data-transition="pop">Purchase album</a>
</li>
</ul>
</div>
<div data-role="popup" id="purchase" 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="b"
data-icon="check" data-inline="true" data-mini="true">Buy: $10.99</a>
<a href="#" data-role="button" data-rel="back" data-inline="true"
data-mini="true">Cancel</a>
</div>
8、分类列表
- data-inset="true"不占据整个屏幕，在一个圆角区域内
- 给第一个<li>添加 data-role="list-divider"属性， data-role="list-divider"一组列表条目的页眉 ；data-divider-theme="a"主题样式
- 气泡数字<span class="ui-li-count">2</span>
- 默认文本显示时是左对齐，使用一个包含class="ui-li-aside"类的元素进行包装右对齐（在右上侧）
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">分类列表的标题<span class="ui-li-count">2</span></li>
<li>
<a href="index.html">
<h2>二级标题1</h2>
<p><strong>描述（强调）</strong></p>
<p>描述</p>
<p class="ui-li-aside"><strong>6:24(右上侧)</strong></p>
</a>
</li>
<li>
<a href="index.html">
<h2>二级标题2</h2>
<p><strong>描述（强调）2</strong></p>
<p class="ui-li-aside"><strong>9:18</strong></p>
</a>
</li>
<!------------第二组列表--------------->
<li data-role="list-divider">第二组列表<span class="ui-li-count">1</span></li>
<li>
<a href="#">
<h2>二级标题1</h2>
<p><strong>描述（强调）</strong></p>
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
</a>
</li>
</ul>
9.data-role="collapsible" 可折叠的 listview
在<ul>列表外加<div> 添加 data-role="collapsible"
- 总列表添加样式：data-theme="b"
- 给单个选项添加样式 ：data-content-theme="c"
<div data-role="collapsible" data-theme="b" data-content-theme="b" >
<h4>折叠列表放在Div中</h4> <!---表头-->
<ul data-role="listview">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
</ul>
</div>
10.可折叠的 组 列表 ：几个组紧贴在一起
- 设置外层 <div data-role=" collapsible-set " data-theme="b" data-content-theme="d">
- 设置组成员,可折叠的列表： <div data-role="collapsible"></div>
- 在ul中添加data-filter="true"，这样jquerymobile就会自动添加一个过滤的搜索框，并且实现搜索功能了。(在子列表最上面添加一个搜索框)
<div data-role="collapsible-set">
<div data-role="collapsible" data-theme="b">
<h4>折叠列表组一</h4>
<ul data-role="listview">
<li><a href="#">子列表1</a></li>
<li><a href="#">子列表2</a></li>
</ul>
</div>
<div data-role="collapsible" >
<h4>折叠列表组二</h4>
<ul data-role="listview">
<li><a href="#">子列表1</a></li>
<li><a href="#">子列表2</a></li>
</ul>
</div>
</div>
11、父子列表，显示子列表数目。
气泡数字：<span class="ui-li-count"></span>
<ul data-role="listview">
<li>
<a href="index.html">Inbox
<span class="ui-li-count">12</span>
</a>
</li>
</ul>
一个案例
<form>
<ul data-role="listview" data-inset="true">
<li data-role="fieldcontain">
<label for="name2">Text Input:</label>
<input name="name2" id="name2" value="" data-clear-btn="true"
type="text">
</li>
<li data-role="fieldcontain">
<label for="textarea2">Textarea:</label>
<textarea cols="40" rows="8" name="textarea2" id="textarea2"></textarea>
</li>
<li data-role="fieldcontain">
<label for="flip2">Flip switch:</label>
<select name="flip2" id="flip2" data-role="slider"><!--滑块-->
<option value="off">Off</option>
<option value="on">On</option>
</select>
</li>
<li data-role="fieldcontain">
<label for="slider2">Slider:</label> <!---滑动块-->
<input name="slider2" id="slider2" value="0" min="0" max="100"
data-highlight="true"
type="range">
</li>
<li data-role="fieldcontain">
<label for="select-choice-1" class="select">Choose shipping method:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</li>
<li class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<button type="submit" data-theme="d">Cancel</button>
</div>
<div class="ui-block-b">
<button type="submit" data-theme="a">Submit</button>
</div>
</fieldset>
</li>
</ul>
</form>
扫一扫
331
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
