jQuery Mobile 列表内容
作者:本站编辑 发布时间:2015-11-24 来源:本站原创
点击数:
jQuery Mobile 列表图标
默认情况下每个列表项都会包含一个箭头图标 "carat-r" (右箭头)。如果要修改这个图标可以使用 data-icon 属性:
实例
<ul data-role="listview">
<li><a href="#">Default is right arrow</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>
16x16 图标
如果你想在你的列表添加标准的 16x16px 的图标, 可以在列表项中添加 <img> 元素，并使用 "ui-li-icon" 类:
实例
<ul data-role="listview">
<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>
</ul>
jQuery Mobile 列表缩略图
大于 16x16px 的图像，请在链接中添加 <img> 元素。
jQuery Mobile 将自动缩放图像到 80x80px:
实例
<ul data-role="listview">
<li><a href="#"><img src="chrome.png"></a></li>
</ul>
分割按钮
在JQuery Mobile的列表中，有时需要对选项内容做两个不同的操作，这时，需要对选项中的链接按钮进行分割。实现分割的方法是在<li>元素中再增加一个<a>元素，便可以在页面实现分割效果。
jQuery Mobile 会自动设置第二个链接为蓝色箭头的图标，图标的链接文字（如果有的话）将在用户将鼠标悬停在 图标时显示:
实例
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some Text</a>
</li>
</ul>