最新的Web开发教程
 

jQuery Mobile列表内容



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

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

使用标准的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" ,使全宽列表视图。

更多内容格式
如何使一个日历。