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>
试一试» data-icon="false"将删除的图标。
对于所有的jQuery Mobile的按钮图标的完整参考,请访问我们的jQuery Mobile的图标参考 。
16×16的图标
要将标准16x16px图标添加到列表中,添加一个<img>一类的“UI丽图标”的链接元素中:
例
<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 :
使用标准的HTML,以填补信息列表:
例
<ul data-role="listview">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome is a free,
open-source web browser. Released in 2008.</p>
</a>
</li>
</ul>
试一试» 拆分按钮
要创建一个垂直分隔栏分割清单,将里面的两个链接<li>元素。
jQuery的移动将自动放置在列表的右侧的第二连杆用右arrow-icon 。 和链接(如果有的话)内的文本将显示,当用户将鼠标悬停在图标:
例
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some
Text</a>
</li>
</ul>
试一试» 让我们来添加一些网页和对话框,使链接更多的功能:
例
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download"
data-transition="pop" data-icon="gear">Download Browser</a>
</li>
</ul>
<div data-role="page" id="download" data-dialog="true">
试一试» 伯爵泡沫
计数气泡用于显示与列表中的项目,如在一个邮箱消息相关联的数字:
要增加数气泡,使用内联元素,如<span>带班"ui-li-count" ,并添加一个数字:
例
<ul data-role="listview">
<li><a href="#">Inbox<span class="ui-li-count" >25</span></a></li>
<li><a href="#">Sent<span class="ui-li-count" >432</span></a></li>
<li><a href="#">Trash<span class="ui-li-count" >7</span></a></li>
</ul>
试一试» 注意:要显示在一个计数气泡的正确数目,它必须被编程更新。 这将在后面的章节来解释。
更多示例
弹出列表
如何创建一个弹出列表。
可折叠列表
如何创建隐藏和显示内容列表。
可折叠弹出列表
如何创建一个可折叠的弹出列表。
全宽可折叠列表
使用data-inset="false"属性,在"collapsibles/collapsible set" ,使全宽列表视图。
更多内容格式
如何使一个日历。