在 jQuery Mobile 中使用 UI 组件

标准元素实现有吸引力的、触摸友好的网站

jQuery Mobile 框架提供了许多 UI 组件。本文从高层次概述了每个元素,并向您介绍如何在移动网站使用这些元素。本文介绍了特定的 UI 组件,解释使用它们的理由,并提供在移动网站上使用它们的代码示例。

Kris Hadlock, Web 开发人员/设计师, Studio Sedition

//www.ibm.com/developerworks/i/p-khadlock.jpgKris Hadlock 从 1996 年起就是一个签约 web 开发人员和设计师。他为很多公司开发过项目,比如,SPIN Magazine、IKEA、United Airlines、JP Morgan Chase、GoDaddy Software 和 Fire Mountain Gems。他也是 Ajax for Web Application Developers (Sams) 和 The ActionScript Migration Guide (New Riders) 的作者,还是各种网站和设计杂志的专栏作者,包括 Peachpit.com、InformIT.com 和 Practical Web Design 杂志。Kris 也是 www.studiosedition.com 的创始人,这是一个网站设计和软件开发工作室,一家专门从事形式和功能融合的工作室。



2012 年 5 月 25 日

jQuery Mobile JavaScript 库是一种强大的方式,允许用户通过 Web 浏览器直接连接到触摸友好的应用程序,从而让移动和平板设备可以访问移动应用程序。

为了使用本文中的任何示例,您必须下载或包括远程托管的 jQuery Mobile 框架文件,您可以在 参考资料 中找到相关的链接。

对话框和弹出窗口

对话框是一个重要的 UI 元素,提示用户作出响应,或者只是显示信息。对话框最常用于向用户提供选项,根据用户的响应执行某些命令。通常情况下,您可以通过两种方式提供对话框,作为模式或者非模式窗口(使用 jQuery Mobile,它们可显示为一个模式对话框)。模式对话框阻止用户与对话框下面的 Web 页面进行交互,需要得到用户的响应,它们才可以继续。

要使用 jQuery Mobile 创建一个对话框,您必须在您想打开的超链接上使用一个 data-rel 属性作为 dialog 窗口,并将其值指定为 dialog。下面的代码显示如何将一个简单的 Web 页面超链接转换为一个将关联 Web 页面打开为一个对话框的超链接:

<a href="dialog.html" data-rel="dialog">Open dialog</a>

默认情况下,jQuery Mobile 框架为 Web 页面添加圆角、边距、深色背景,使它显示为放置在 Web 页面之上的一个对话框。

有几种方法可以关闭对话框。第一个选项是简单地链接到另一个页面,这可以与用户的响应关联。对于需要采取的任何处理类型,这都将是一个不错的选择,例如,一个 Save 按钮可以链接到一个 Web 页面,该页面将某些信息保存到数据库,然后带着一个确认消息返回原始的父 Web 页面。第二个选项是在对话框中的超链接上使用 data-rel 属性,并将其值设置为 back,如以下代码所示。当在对话框中包括一个 Cancel 按钮时,这是一个不错的选项。

<a href="parent.html" data-rel="back">Cancel</a>

不幸的是,在不支持 JavaScript 的设备上无法使用该选项。最后的选项是使用 JavaScript 直接调用对话框的 close 方法:

$('#my-dialog').dialog('close');

您也可以使用多种对话框的转换,为您的移动网站添加不一样的风格。您可以通过将 data-transition 属性包含到您装对话框的超链接,来设置转换:

<a href="dialog.html" data-rel="dialog" data-transition="pop">Open dialog</a>

目前可用的数据转换是 popslidedownflip;每个函数都正如您所假设的一样。与对话框有关的最常用转换是 pop,但肯定也有可以应用其他转换的场景。


工具栏

jQuery Mobile 框架包括页眉和页脚作为其标准工具栏;然而,由于有 navbar,工具栏也可以用来显示导航。在 jQuery Mobile 中,页眉的默认用法是作为固定在 Web 页面顶部的页面标题;在大部分情况下,页脚是 Web 页面中的最后一个元素,并且包括版权信息、其他超链接等内容。

创建页眉或页脚很容易,就像将 data-role 属性添加到 HTML 元素一样。清单 1 显示了创建一个 HeaderFooter 工具栏有多简单。

清单 1. 利用 jQuery Mobile 框架创建一个页眉和页脚工具栏
<div data-role="header">
  <h1>My Page Title</h1>
</div>

<!-- Some page content... -->

<div data-role="footer">
  <p>Copyright notice</p>
</div>

您可以使用 CSS 自定义页眉和页脚,您也可以使用一些可用的 data- 属性,如 data-position,它可以设置工具栏的位置行为。该属性的默认值是 inline,但您也可以将它的值设置为 fixed,以便将工具栏(如,页眉)保持在一个特定的位置,即使在 Web 页面滚动时,工具栏的位置也不变。另一个值得一提的位置是 fullscreenfullscreen 模式与 fixed 相同,但在用户开始与 Web 页面交互之前,工具栏不会显示在 Web 页面上。当用户与 Web 页面交互时,工具栏出现,使用户能够与它们进行交互,然后,当用户停止与页面进行交互时,工具栏消失(清单 2)。在显示一个视频播放器、照片集或类似的内容时,该选项十分有用。

清单 2. 利用 jQuery Mobile 框架将页眉和页脚工具栏设置为全屏
<div data-role="header" data-position="fullscreen">
  <h1>My Page Title</h1>
</div>

<!-- Some page content... -->

<div data-role="footer" data-position="fullscreen">
  <p>Copyright notice</p>
</div>

navbar 用于在一个页眉或页脚内显示多达五个按钮或导航项。根据您添加到 navbar 的按钮数量,它将这些按钮平均分布,使它们的大小都一样。要创建一个 navbar,您只需将一个 data-role 属性添加到环绕着一个列表的元素,并将其值设置为 navbar清单 3)。该列表被动态转换成悬停、静态和活动状态的水平导航栏,全都可以使用 jQuery Mobile 主题框架进行定制。

清单 3. 使用 navbar 将一个列表转换为一个导航栏
<div data-role="header" data-position="fullscreen">
  <div data-role="navbar">
    <ul>
      <li><a href="#">Nav item 1</a></li>
      <li><a href="#">Nav item 2</a></li>
    </ul>
  </div>
</div>

navbar 还有另一个很好的特性,您可以在每个按钮内包括自定义图标。jQuery Mobile 框架包括一组标准移动图标,您可以通过 data-icon 属性使用它们,您也可以使用自己创建或购买的任何自定义图标。


布局选项

格式化内容是一个重要途径,可以为用户提供一个可访问的方式来引用和收集在您的网站所提供的信息。随着移动 Web 流量以及对移动网站版本的需求的增加,格式化内容变得更加重要。我们不能够再仅仅依靠我们的用户坐在桌子前花时间与我们的网站进行交互。用户在移动,并且简单、漂亮的格式化内容比以往任何时候都更加重要。

在为移动 Web 页面格式化内容时,重要的是要记住,大多数移动设备的屏幕都较窄。也就是说,仍然存在大量要调用列网格的情况。jQuery Mobile 包括一个布局网格,您可以使用它通过 CSS 类轻松地创建一个数据网格(清单 4)。

清单 4. 使用一个布局网格来创建列
<div class="ui-grid-a">
 <div class="ui-block-a">
    Left column
  </div>
 <div class="ui-block-b">
    Right column
  </div>
</div>

从一组 HTML 元素创建网格时默认使用的 CSS 类是 ui-grid-* 类。星号(*)表示您在网格中选择使用的主题。(有关主题系统的更多信息,请参阅 参考资料。)您可以根据自己的选择创建多个列,但我建议最多只使用两列,并且只在有必要时使用。

另一种格式化内容的便捷方式是,只显示一部分内容,为用户提供一个概述以及阅读更多内容的选项。因为大部分移动设备的屏幕都较小,保持页面长度相对较短并且只显示扼要内容,这很重要。折叠内容块,是处理这种功能的一个非常棒的方式(清单 5)。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)。

清单 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)。

清单 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 显示了利用列表分隔器增强的一个简单列表示例。

清单 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)。

清单 9. 将计数泡泡添加到 jQuery Mobile 列表项
<ul data-role="listview"> 
  <li>
    <a href="inbox.html">Inbox 
      <span class="ui-li-count">12</span>
    </a>
  </li>
</ul>

就像您将一个图片添加到 HTML 页面中一样,您也可以添加一个缩略图。只需要将一个定位点元素添加到列表项,添加一个用作缩略图的图片,然后添加您希望在它旁边显示的副本。jQuery Mobile 就会处理剩下的工作(见 清单 10)。

清单 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 所示。

清单 11. 将图标添加到 jQuery Mobile 列表项
<ul data-role="listview"> 
  <li>
    <a href="zeppelin.html"> 
      <img src="images/album-cover.jpg" class="ui-li-icon" /> 
      Led Zeppelin Album
   </a>
  </li>
  <li>
    <a href="hendrix.html"> 
      <img src="images/album-cover.jpg" class="ui-li-icon" /> 
      Jimi Hendrix Album
    </a>
  </li> 
</ul>

ul-li-icon 类限制图片的大小,最大宽度和高度为 40px,它还能够将图片放在列表项中的适当位置。


搜索筛选

除了刚刚介绍的所有优秀的列表增强特性之外,还有最后一个增强,它极大地改善了长列表的可用性。有时,就是无法削减需要放入移动网站的所有内容。在这种情况下,您就会有一个长列表,它看起来几乎是无法使用的,而搜索筛选器栏就是处理该问题的一个很好的方式。很幸运,使用 jQuery Mobile 将搜索筛选器栏添加到列表中并不需要花很大功夫。只需将 data-filter 属性添加到列表,并将其值指定为 true清单 12)。

清单 12. 将搜索筛选器栏添加到 jQuery Mobile 列表
<ul data-role="listview" data-filter="true">
  <li><a href="#">Chris A.</a></li>
  <li><a href="#">Cindy V.</a></li>
  <li><a href="#">John B.</a></li>
  <li><a href="#">Tammy D.</a></li>
</ul>

搜索筛选器栏添加一个文本输入,为用户提供一种功能可供他们输入正在查找的内容,同时列表将根据输入实时进行筛选。例如,如果您有一个员工姓名列表,并且您将一个搜索筛选器栏添加到该列表,用户就能够通过向搜索筛选器文本输入键入一个或多个字符,来筛选和缩小在该页面上显示的结果范围。

您也可以提供更进一步的增强,将分隔符添加到您的 listview,同时仍然包括一个搜索筛选器栏(见 清单 13)。

清单 13. 将搜索筛选器栏添加到一个包括列表分隔符的 jQuery Mobile 列表
<ul data-role="listview" data-filter="true">
  <li data-role="list-divider">C</li> 
  <li><a href="#">Chris A.</a></li>
  <li><a href="#">Cindy V.</a></li>
  <li data-role="list-divider">J</li>
  <li><a href="#">John B.</a></li>
  <li data-role="list-divider">T</li>
  <li><a href="#">Tammy D.</a></li>
</ul>

列表分隔符和搜索筛选器栏的组合,是一个相当好的特性,并且真正增加了繁琐的长列表的可用性,否则,这些列表将是无法使用的。


表单元素

凭借 jQuery Mobile,在支持它的浏览器上,原生表单元素都被转换为自定义控件。这些自定义控件是原生表单元素以及由该框架专门创建的某些特殊表单元素的增强版本。幸运的是,对于不支持这些表单元素的浏览器,所有表单元素都可以降级,所以可用性并不是一个问题。使用 jQuery Mobile 进行文本输入,基本上也与原生文本输入相同;然而,您可以使用新的 HTML5 输入类型,如 emailtelnumber。要创建任何这些表单元素,您只需要将输入类型设置为其中一个这里所提及的值。如需了解 HTML5 输入类型的完整列表,请参阅 参考资料

除了所支持的 HTML5 输入类型之外,您还可以创建一个滑块。滑块包括一个图柄和一个供图柄在上面滑动的槽 。随着图柄的移动,滑块的值被存储起来,然后,在表单被提交时,该值也被提交。要创建一个滑块,您可以从基本的 HTML 输入开始,但要将 type 属性定义为 range。然后,添加 minmaxvalue 属性,并为 value 属性定义一个默认值,该值确定图柄在滑块上的位置。清单 14 显示了一个滑块元素示例,其 max 值为 10min 值为 0,默认的 value 值为 2

清单 14. 使用 jQuery Mobile 框架创建一个滑块元素
<div data-role="fieldcontain">
	<label for="slider">My slider:</label>
 	<input type="range" name="slider" id="slider" value="2" min="0" max="10"  />
</div>

最后一种自定义输入类型是反转切换开关,它在移动设备上已很常见。对于处理 on/off 或 true/false 类型的数据,这是一个很好的元素。用户使用反转开关的方式可以有很多种,通过点击开关的任意一侧,或类似滑块一样拖动图柄。创建一个切换开关与创建一个滑块类似,但其中还是有一些较大的差异。输入变成一个 select 元素,并且要添加两个选项。清单 15 提供了切换开关的示例,该开关提供 on/off 功能。

清单 15.使用 jQuery Mobile 框架创建切换开关
<div data-role="fieldcontain">
  <label for="slider">Select slider:</label>
  <select name="slider" id="slider" data-role="slider">
    <option value="off">Off</option>
    <option value="on">On</option>
  </select> 
</div>

您可能也注意到了,有一个 data-role 属性的值为 slider。该属性值将一个自定义 jQuery Mobile 选择列表转换为一个切换开关。


结束语

jQuery Mobile 框架提供一个为移动网站创建可用 UI 组件的快速解决方案。在某些情况下,您只需要用几行简单的 HTML,就可以包括一个可以向您网站添加值的移动 UI 组件。本文并未介绍由该框架所提供的组件完整列表,如需了解有关框架组件的更多信息并观看它们的运行,请查看 参考资料 中的链接。

参考资料

学习

获得产品和技术

  • 下载并引用 jQuery Mobile JavaScript 和 CSS 文件
  • 下载并试用 IBM Mobile Technology Preview,一组代码示例和服务,可以帮助您开始构建或扩展和集成到企业的移动应用程序。该预览包括一个 RESTful 通知服务;一个用于构建混合移动应用程序的开源框架 PhoneGap;一个轻量级的 WebSphere Application Server 运行时;以及向您演示其工作方式的样例代码。
  • IBM WebSphere Application Server Feature Pack for Web 2.0 and Mobile 包括 IBM Dojo 1.7 Toolkit、新的移动和富 Internet 应用程序 (RIA) 构建块,以及一个基于 Dojo 的图表组件。使用附带的 Rational 工具,该 Feature Pack 可帮助您采用原先面向桌面浏览器开发的 WebSphere 应用程序,对其进行调整,并将它们部署到移动设备中。
  • 以最适合您的方式 评估 IBM 产品:下载产品试用版,在线试用产品,在云环境中使用产品,或者在 SOA 沙箱 中花几小时学习如何高效实现面向服务的架构。

讨论

  • 加入 developerWorks 社区。查看开发人员推动的博客、论坛、群和维基,并与其他 developerWorks 用户交流。

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=移动开发, Web development, Open source
ArticleID=817989
ArticleTitle=在 jQuery Mobile 中使用 UI 组件
publish-date=05252012