另一种格式化内容的便捷方式是，只显示一部分内容，为用户提供一个概述以及阅读更多内容的选项。因为大部分移动设备的屏幕都较小，保持页面长度相对较短并且只显示扼要内容，这很重要。折叠内容块，是处理这种功能的一个非常棒的方式（）。jQuery Mobile 框架为 collapsible 内容提供一个 data-role，若使用恰当，它可以将 header 元素及关联的内容转换为一个折叠块。
清单 5. 使用可折叠内容区域<div data-role="collapsible"> <h2>My header</h2> <p>The full content would normally be longer than this, which is why we would want to hide it by default and allow the user to choose whether they wanted to read it by viewing the title. Therefore the title plays an important role when creating collapsible content blocks.</p> </div>
默认情况下，块将页眉文本显示为一个带 + 图标的按钮。点击它时，将显示完整的内容，并且 + 图标将变成一个 - 图标，表示按钮可以被再次点击以关闭完整的内容，并回到默认的按钮状态。
创建简单的列表列表是在移动网站上能看到的一个常用元素。利用 jQuery Mobile，您可以创建多种不同的列表格式，如基本链接列表、嵌套列表、编号列表、拆分按钮列表、带分隔符的列表、带图标的列表、缩略图或计数泡泡，以及包括搜索筛选器栏的列表。常用的列表类型是基本链接列表。要创建一个基本链接列表，您只需要创建一个标准的 HTML 无序列表，添加一个 data-role 属性，并为它分配一个值 listview（）。
清单 6. 使用 jQuery Mobile 框架创建基本链接列表<ul data-role="listview"> <li><a href="#">List item 1</a></li> <li><a href="#">List item 2</a></li> </ul>
要创建一个编号列表，您可以使用与清单 6 相同的代码，只需将 ul 修改为 ol，以将它转换为一个有序列表。
增强列表在您明白创建基本列表有多简单后，您可能就会想要更多选项。对列表提供更多功能的一个选项称为拆分按钮列表。拆分按钮列表使您能够在同一个列表项中提供两个可单击的选项。该功能对列表项很有用，举个例子，列表项包含有关该特定项的特定详细信息的一个链接，但可能还需要包含与该项有关的其他操作，例如用于购买该项或将它分享到社交网络上的一个按钮。创建一个拆分按钮列表很简单：在使用 listview data-role 的一个列表项中添加两个彼此相邻的定位点标记（）。
清单 7. 使用 jQuery Mobile 框架创建拆分按钮列表<ul data-role="listview" data-split-icon="gear"> <li> <a href="item-detail.html"> <h3>Item title</h3> <p>Item overview</p> </a> <a href="item-purchase.html" data-rel="dialog">Purchase item</a> </li> <li> <a href="item-detail.html"> <h3>Item title</h3> <p>Item overview</p> </a> <a href="item-purchase.html" data-rel="dialog">Purchase item</a> </li> </ul>
清单 7 中的拆分按钮列表所提供的列表项包括一个标题和一个概述，用户可以单击它查看有关该项的更多详细信息。该列表项还包括一个用作在对话框中购买该列表项的一个超链接的图标。您也可以使用 data-split-icon 属性，修改显示在列表项右侧的拆分按钮的默认图标。
另一个有用的基本列表增强是列表分隔符。列表分隔符提供一种对列表项进行分类的方式。例如，您可以用字母标记您的列表项，并使用列表分隔符按字母表上的每个字母来分隔它们，或者您可能有一组与音乐相关的列表项，您可以用列表分隔符将它们对应不同音乐流派进行分类。 显示了利用列表分隔器增强的一个简单列表示例。
清单 8. 将列表分隔符添加到 listview<ul data-role="listview"> <li data-role="list-divider">Alternative</li> <li><a href="#">Nirvana</a></li> <li data-role="list-divider">Rock and Roll</li> <li><a href="#">Jimi Hendrix</a></li> <li><a href="#">Led Zeppelin</a></li> </ul>
使用 data-role 属性值 list-divider，使这些列表项与其他列表项具有不同的视觉样式。
您也可以通过使用图标、缩略图和计数泡泡来创建不同的视觉样式。您可以通过使用 ul-li-count 类，将计数泡泡添加到一个列表项（）。
清单 9. 将计数泡泡添加到 jQuery Mobile 列表项<ul data-role="listview"> <li> <a href="inbox.html">Inbox <span>12</span> </a> </li> </ul>
就像您将一个图片添加到 HTML 页面中一样，您也可以添加一个缩略图。只需要将一个定位点元素添加到列表项，添加一个用作缩略图的图片，然后添加您希望在它旁边显示的副本。jQuery Mobile 就会处理剩下的工作（见 ）。
清单 10. 将缩略图添加到 jQuery Mobile 列表项<ul data-role="listview"> <li> <a href="zeppelin.html#thank-you"> <img src="images/album-cover.jpg" /> <h3>Led Zeppelin</h3> <p>Thank You</p> </a> </li> <li> <a href="zeppelin.html#ten-years"> <img src="images/album-cover.jpg" /> <h3>Led Zeppelin</h3> <p>Ten Years</p> </a> </li> </ul>
您可以使用与添加缩略图一样的方法来添加图标；惟一的区别是您要使用 ui-li-icon 类，如 所示。
清单 11. 将图标添加到 jQuery Mobile 列表项<ul data-role="listview"> <li> <a href="zeppelin.html"> <img src="images/album-cover.jpg" /> Led Zeppelin Album </a> </li> <li> <a href="hendrix.html"> <img src="images/album-cover.jpg" /> Jimi Hendrix Album </a> </li> </ul>
ul-li-icon 类限制图片的大小，最大宽度和高度为 40px，它还能够将图片放在列表项中的适当位置。
搜索筛选
相关文章
精彩导读
热门资讯
关注我们
