jQuery Mobile 列表

jQuery Mobile 列表视图

jQuery Mobile 中的列表视图是标准的 HTML 列表：有序列表 (<ol>) 和无序列表 (<ul>)。

如需创建列表，请向 <ol> 或 <ul> 元素添加 data-role="listview"。如需使这些项目可点击，请在每个列表项（<li>）中设置链接：

实例

<ol data-role="listview">
  <li><a href="#">列表项</a></li>
</ol>
<ul data-role="listview">
  <li><a href="#">列表项</a></li>
</ul>

如需为列表添加圆角和外边距，请使用 data-inset="true" 属性：

实例

<ul data-role="listview" data-inset="true">

提示：默认情况，列表中的列表项会自动转换为按钮（无需 data-role="button"）。

列表分隔符

列表分隔符（List Dividers）用于把项目按组分开。

如需规定列表分隔符，请向 <li> 元素添加 data-role="list-divider" 属性：

实例

<ul data-role="listview">
 <li data-role="list-divider">欧洲</li>
  <li><a href="#">法国</a></li>
  <li><a href="#">德国</a></li>
</ul>

如果您的列表是字母顺序的（比如通讯录），jQuery Mobile 自动添加恰当的分隔符，通过在 <ol> 或 <ul> 元素上设置 data-autodividers="true" 属性：

实例

<ul data-role="listview" data-autodividers="true">
  <li><a href="#">Adam</a></li>
  <li><a href="#">Angela</a></li>
  <li><a href="#">Bill</a></li>
  <li><a href="#">Calvin</a></li>
  ...
</ul>

提示：data-autodividers="true" 属性通过对列表项文本的首字母进行大写来创建分隔符。

搜索过滤器

如需在列表中添加搜索框，请使用 data-filter="true" 属性：

实例

<ul data-role="listview" data-filter="true"></ul>

默认地，搜索框中的文本是 "Filter items…"。

如需修改默认文本，请使用 data-filter-placeholder 属性：

实例

<ul data-role="listview" data-filter="true" data-filter-placeholder="搜索姓名">

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 免费的开源 web 浏览器。发布于 2008 年。</p>
    </a>
  </li>
</ul>

jQuery Mobile 列表图标

如需向您的列表添加 16x16px 的图标，请向 <img> 元素添加 class="ui-li-icon" 属性：

实例

<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>

拆分按钮

如需创建带有垂直分隔栏的拆分列表，请在 <li> 元素内放置两个链接。

jQuery Mobile 会自动为第二个链接添加蓝色箭头图标的样式，链接中的文本（如有）将在用户划过该图标时显示：

实例

<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-rel="dialog">下载浏览器</a>
  </li>
</ul>

计数泡沫

计数泡沫用于显示与列表项相关的数目，例如邮箱中的消息：

如需添加计数泡沫，请使用行内元素，比如 <span>，设置 class "ui-li-count" 属性并添加数字：

实例

<ul data-role="listview">
  <li><a href="#">Inbox<span class="ui-li-count">335</span></a></li>
  <li><a href="#">Sent<span class="ui-li-count">123</span></a></li>
  <li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>

注释：如需在计数泡泡中显示正确的数字，就必须进行程序化更新。我们将在下一章种讲解。

更多实例

只读列表

如何创建没有链接的列表（不是按钮，不可点击）

更改列表项的默认链接图标

如何为列表项设置不同的链接图标（右箭头是默认的）

可折叠列表

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

更多内容格式

如何制作日历。