W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

jQuery Mobile 列表内容




jQuery Mobile 列表图标

默认情况下每个列表项都会包含一个箭头图标 "carat-r" (右箭头)。如果要修改这个图标可以使用 data-icon 属性:

Example

<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>
尝试一下 »

Note data-icon="false" 将会移除图标。

更完整的 jQuery Mobile 按钮图标,请访问我们的 jQuery Mobile 图标参考手册


16x16 图标

如果你想在你的列表添加标准的 16x16px 的图标, 可以在列表项中添加 <img> 元素,并使用 "ui-li-icon" 类:

Example

<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:

Example

<ul data-role="listview">
  <li><a href="#"><img src="chrome.png"></a></li>
</ul>
尝试一下 »

使用标准的HTML添加列表信息:

Example

<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 Mobile会自动将第二个链接放在右侧箭头图标列表的右侧。 当用户将鼠标悬停在图标上时,链接中的文本(如果有)将显示:

Example

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#">Some Text</a>
  </li>
</ul>
尝试一下 »

添加一些页面和对话框使链接功能更加丰富:

Example

<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>,设置 class "ui-li-count" 属性并添加数字:

Example

<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>
尝试一下 »

注意: 显示一个正确的气泡数字,必须修改编程方式。这将在以后的章节解释。


Examples

更多实例

弹窗列表
如何创建弹窗列表。

可折叠列表
如何创建隐藏和显示内容的列表。

可折叠弹出列表
如何创建可折叠的弹出列表。

全宽可折叠列表
使用 data-inset="false" 属性上的 "collapsibles/collapsible set" 属性启用全宽列表视图。

更多内容格式
如何制作日历