9.4 jQuery Mobile的使用

9.4.1 准备工作

首先去官方下载最新的jQuery Mobile版本。其次，建议在页面中使用HTML 5标准的页面声明和标签，因为移动设备浏览器对HTML 5标准的支持程度要远远优于PC设备，因此使用简洁的HTML 5标准可以更加高效地进行开发，避免了因为声明错误出现的兼容性问题。代码如下：

[插图]

9.4.2 构建HTML模板

jQuery Mobile可以在普通的html标签或html 5标签中工作，在结构化的页面中，完整的页面结构分为header、content和footer这三个主要区域。一个最简单的jQuery Mobile代码如下：

[插图]

显示效果如图9.1所示：

[插图]

图9.1 图单的jQuery Mobile代码显示

在上面代码中，我们引入了3个文件，这也是使用 jQuery Mobile所必备的3个文件：

• CSS文件：jquery.mobile.css
• jQuery文件：jquery.js
• jQuery Mobile文件：jquery.mobile.js

注意：1，默认情况下，移动设备的浏览器会像在大屏幕的Web浏览器那样显示你的页面，宽度达到了 960 像素，然后缩小内容以适应移动设备的小屏幕，因此用户在移动设备看这个页面时感觉字体就比较小了，必须要放大才能看得清楚。幸运的是可以使用特殊的Meta元素可视区进行纠正，这个元素会通知浏览器使用移动设备的宽度作为可视区的宽度。对于 Web应用程序，一个常见的设置是： [插图] 这个元素设置宽度为设备的最大宽度，禁止用户放大和缩小。2，在中按顺序加入框架的引用，注意加载的顺序： [插图]

9.4.3 data-role属性

在上面的代码中可以看到页面中的内容都包装在div标签中，并在标签中加入data-role= “page”属性。这样jQuery Mobile就会知道哪些内容需要处理。把代码简化后，如下所示：

[插图]

注意：data-属性是HTML 5新推出的很有趣的一个特性，它可以让开发人员添加任意属性到html标签中，只要添加的属性名有“data-”前缀。

表9-1 data-role属性

[插图]

9.4.4 添加内容

如果我们需要在页面中添加一个简单列表，那么就可以使用刚才所说的data-role属性，将下面代码插入到content中：

[插图]

显示效果如图9.2所示：

[插图]

图9.2 列表显示效果（一）

如果你不喜欢宽度为100%的列表，那么你可以通过为ul元素设置data-inset属性。 例如为<ul>设置 data-inset=”true” 。显示效果如图9.3所示。

[插图]

图9.3 列表显示效果（二）

9.4.5 样式切换

jQuery Mobile自带了一些不错的主题，这些主题能够快速的帮助开发人员修改页面的UI。我们只需在组件上添加data-theme属性即可，它的值是a、b、c、d或e。此外，jQuery Mobile还提供了一个强大的ThemeRoller 组件（http://jquerymobile.com/themeroller/），可以让你自定义主题。ThemeRoller如图9.4所示：

[插图]

图9.4 Theme Roller界面

为列表添加data-theme=”e”后，显示效果如图9.5所示：

[插图]

图9.5 切样列表样式

[插图]