文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

9.4 jQuery Mobile 的使用

发布于 2024-08-20 01:10:33 字数 7408 浏览 0 评论 0 收藏 0

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，在<head>中按顺序加入框架的引用，注意加载的顺序：

9.4.3　data-role属性

在上面的代码中可以看到页面中的内容都包装在div标签中，并在标签中加入data-role=page

属性。这样jQuery Mobile就会知道哪些内容需要处理。把代码简化后，如下所示：

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

表9-1　data-role属性

类　型	描　述	示　例
Button	设置元素为button类型	data-role=`button`
Checkbox	设置元素为复选框类型，只需要设置type=`checkbox`,不需要data-role	type=`checkbox`
Collapsible	设置元素为一个包裹标题和内容的容器	data-role=`collapsible`
Collapsible set	设置元素为一个包裹Collapsible的容器	data-role=`collapsible-set`
Content	设置元素为一个内容容器	data-role=`content`
Dialog	设置元素为一个对话框	data-rel=`dialog`
Field container	设置元素为一个区域包裹容器，包含label/form的元素对	data-role=`fieldcontain`
Flip toggle switch	设置元素为一个翻转切换元素	data-role=`slider`
Footer	页面页脚容器	data-role=`footer`
Header	页面标题容器	data-role=`header`
Link	链接元素，它共享button的属性	data-role=`button`
Listview	设置元素为一个列表视图	data-role=`listview`
Navbar	设置元素为一个导航栏	data-role=`navbar`
Page	设置元素为一个页面容器	data-role=`page`
Radio button	设置元素为一个单选框，不需要data-role	type=`radio`
Select	设置元素为一个下拉框，不需要data-role	<select></select>
Slider	设置元素为一个有范围值的文本框	data-role=`slider`
Text input & Textarea	设置元素为一个文本框、数字框、搜索框等	type=`text\|number\|search\|等等`

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所示：