从本文开始，使用 jQuery Mobile 与 HTML5 开发 Web App 系列将会进入第三部分——jQuery Mobile 事件与方法，这其中将会利用之前所讲述的 jQuery Mobile 组件作为例子说明，因此 Kayo 建议如果你不熟悉 jQuery Mobile ，可以首先阅读前面两部分的文章。本文会介绍 jQuery Mobile 的默认配置以及一些基本的事件使用方法。

一.默认配置

jQuery Mobile 会有一些默认的设置，如之前介绍过的 Ajax 导航形式，可以选择在默认配置中关闭，这样整个网站都会关闭 jQuery Mobile Ajax 导航。

jQuery Mobile 把所有这些配置都封装在 $.mobile 中，作为它的属性，因此改变这些属性值就可以改变 jQuery Mobile 的默认配置。

当 jQuery Mobile 开始执行时，它会在 document 对象上触发 mobileinit 事件，并且这个事件远早于 document.ready 发生，因此开发者需要通过如下的形式重写默认配置：

1
2
3
$(document).bind( "mobileinit" , function (){
     // 新的配置
});

由于 mobileinit 事件会在 jQuery Mobile 执行后马上触发，因此开发者需要在 jQuery Mobile 加载前引入这个新的默认配置，若这些新配置保存在一个名为 custom-mobile.js 的文件中，你按如下顺序引入 jQuery Mobile 的各个文件。

1
2
3
< script src = "jquery.min.js" ></ script >
< script src = "custom-mobile.js" ></ script >
< script src = "jquery-mobile.min.js" ></ script >

下面以 Ajax 导航作为例子说明如何自定义 jQuery Mobile 的默认配置：

在之前的文章《使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 页面与对话框》中，Kayo 说明过，jQuery Mobile 是以 Ajax 的方式驱动网站（可以参加上文的第三点“Ajax 驱动的站点”），若某个链接不需要 Ajax ，可以为某个链接添加 data-ajax=”false” 属性，这是局部的设置，如果开发者需要取消默认的 Ajax 方式（即全局取消 Ajax），可以自定义默认配置：

代码如下：

1
2
3
$(document).bind( "mobileinit" , function (){
     $.mobile.ajaxEnabled = false ;
});

jQuery Mobile 是基于 jQuery 的，因此你也可以使用 jQuery 的 $.extend 扩展 $.mobile 对象，

1
2
3
4
5
$(document).bind( "mobileinit" , function (){
     $.extend($.mobile, {
         ajaxEnabled: false
     });
});

使用上面的第二种方法可以很方便的自定义多个属性，如在上例的基础上同时设置 activeBtnClass ，即为当前页面分配一个 class，原本的默认值为 “ui-btn-active”，现在设置为“new-ui-btn-active”，可以这样写：

1
2
3
4
5
6
$(document).bind( "mobileinit" , function (){
     $.extend($.mobile, {
         ajaxEnabled: false ,
         activeBtnClass: "new-ui-btn-active"
     });
});

上面的例子中介绍了简单同时也是最基本的 jQuery Mobile 事件，它反映了 jQuery Mobile 事件需要如何使用，同时也要注意触发事件的对象和顺序。

下面列出所有的默认配置及说明。（以属性名、值的类型、默认值的方式说明）

activeBtnClass   字符串   默认值："ui-btn-active"

为激动状态的按钮分配 class 值。

activePageClass   字符串   默认值："ui-page-active"

为当前页面分配 class 值。

ajaxEnabled   布尔型   默认值：true

控制是否禁止默认的 Ajax 链接点击和表单提交，并停止 hash 的监听，然后以常规的 HTTP 方式进行。

allowCrossDomainPages   布尔型   默认值：false

设置是否允许跨域。因为 jQuery Mobile 会记录 location hash ，这有可能会为网站带来 cross-site scripting (XSS) 攻击，因此该选项默认为 false 。

autoInitializePage   布尔型   默认值：true

当 DOM 加载完毕后，jQuery Mobile 会自动调用 $.mobile.initializePage 方法。如果设置该属性为 false ，则页面不进行初始化，即页面空白。

buttonMarkup.hoverDelay   整形   默认值：200

该属性设置触摸触摸某一个 jQuery Mobile 按钮后添加 hover 和 down 的 class 的延时。该数值越小，延时越小，触摸越灵敏，但同时很有可能错误的触发页面滚动条滚动。因此建议数值不要太小。

defaultDialogTransition   字符串   默认值："pop"

设置使用 Ajax 方式的对话框的默认过场动画。

defaultPageTransition   字符串   默认值：fade

设置使用 Ajax 方式跳转的页面的默认过场动画。

gradeA   布尔型   默认值："true"

设置 $.support.mediaquery 的返回值，默认为符合全部 grade A 等级的移动设备的支持条件才会返回 true 。

hashListeningEnabled   布尔型   默认值：true

设置是否监听和处理 location.hash 的改变。

ignoreContentEnabled   布尔值   默认值：false

把该选项设置为 true ，并且在某元素的父元素上设置 data-enhance="false" 属性，那么该元素会自动降低 jQuery Mobile 增强（jQuery Mobile 元素增强指的是 jQuery Mobile 对网页基本元素在样式上的丰富、交互上的增强以及相应的 HTML 结构改造）。

linkBindingEnabled   布尔值   默认值：true

jQuery Mobile 会自动绑定锚标记到文档中，设置该选项为 false 将阻止所有的锚点击处理，例如取消激活按钮状态。一般来说只有在把锚标记处理交给另一个处理库时才设置该属性为 false 。

loadingMessageTextVisible   布尔值   默认值：false

设置当页面加载中的时候是否显示提示文字。

loadingMessage   字符串   默认值："loading"

设置当页面显示加载提示时，加载提示文字的内容。

loadingMessageTheme   字符串   默认值："A"

设置当页面显示加载提示时，加载提示的默认主题。

minScrollBack   整形   默认值：250

设置页面最小滚动距离

NS   字符串   默认：""

该属性可以改变 jQurey Mobile 的命名空间，jQuery Mobile 按 data-NS 属性值安排命名空间，默认为空，则直接 data-role ，举个简单的例子，若设置 NS 的值为 "custom" ，则此时需要定义一个 jQuery Mobile 头部的话需要从原来的 data-role="header" 改为 data-custom-role="header" ，其他 data-role 也要改成为 data-custom-role 。这样开发者可以创建属于自己的命名空间，避免与 jQuery Mobile 原有的属性发生冲突， 便于制作自定义主题。

需要注意的是，当你使用了 data-命名空间后，你需要更新 jQuery Mobile css 文件的选择器，格式如下

.ui-mobile [data-custom-role=page], .ui-mobile [data-custom-role=dialog] ......

pageLoadErrorMessage   字符串   默认值："Error Loading Page"

设置当 Ajax 加载页面错误时显示的提示信息。

pageLoadErrorMessageTheme   字符串   默认值："e"

设置当 Ajax 加载页面错误时错误提示框的主题样式。

pushStateEnabled   布尔型   默认值：true

在支持的浏览器中开启 history.replaceState 这个增强特性，把哈希值（hash-based）的 Ajax 请求转化为完整的文档路径。jQuery Mobile 建议在关闭 Ajax 导航和大量使用外部链接的情况下关闭这个特性。

subPageUrlKey   字符串   默认值："ui-page"

URL 参数用来指向由组件生成的子页面(如嵌套列表页)，该 URL 会被解释成如 example.html&ui-page=subpageIdentifier 的形式，而在 &ui-page= 之前的哈希值会被 jQuery Mobile 向此 URL 地址做 Ajax 请求。

touchOverflowEnabled   布尔型   默认值：false

设置是否使用设备的原生区域滚动特性，除了 iOS5 之外大部分的设备到目前还不支持原生的区域滚动特性，因此在 jQuery Mobile 1.1.0 中不建议修改该属性。

二.事件基础

通过上面的基本配置，相信大家对 jQuery Mobile 的事件也有一定了解，这里 Kayo 再正式介绍一下 jQuery Mobile 的事件。

jQuery Mobile 在基于本地事件上，创建了一系列的自定义事件，大部分事件是基于触摸设备的使用情况开发的，当然这些事件对于桌面环境也会有适当的处理，开发者可以使用 bind() 函数绑定到需要的页面对象中。

值得注意的是，jQuery Mobile 是基于 Ajax 导航的，所以采用 bind() 方法绑定的事件无法作用于 Ajax 产生的网页元素中，因此建议开发者使用动态绑定的方法如 live()、delegate() 将事件动态的绑定到相应的元素中。live()、delegate() 等方法可以把 jQuery Mobile 选择器选择的 DOM 元素，在整个 DOM 范围将其持久化，这就意味着，无论该元素是先前存在还是通过 Ajax 动态加载的，事件都会被绑定，如同 CSS 给元素添加样式一样。这在对 Ajax 有比较大依赖的网站中是必须注意的。

live()、delegate() 在实现动态绑定的原理和资源消耗方面也有很大的差别，但这并不是本文的讨论范围，Kayo 将会另写文章叙述。

2012/11/7 更新

“刚刚在网友提醒下，了解到在 jQuery 1.7 中，引入了一个新的事件绑定函数 —— .on() ，用于代替 bind, live, delegate 。但 jQuery Mobile 文档仍建议使用 .bind() 和 .live() 方法绑定事件，jQuery Mobile 并没有明确其中原因，但考虑到低版本的 jQuery Mobile 只需 jQuery 1.6.4 的支持就足够，出于兼容性的原因，当然也可能是由于考虑到开发者的习惯，jQuery Mobile 才作出以上建议。当然如果开发者熟悉 .on() 方法也不妨采用 .on() 进行事件绑定。”

下面以其中的 live() 方法举一个例子说明如何动态绑定 jQuery Mobile 事件。

1
2
3
4
5
$( function (){
     $( "body" ).live( 'swiperight' , function () {
         $( '#next' ).click(); // #next 为下一页的链接的 id
     });
});

说明：上面的例子中，假设进入下一页的链接的 id 为 next 。那么在页面上向右滑动就会触发点击了下一页的链接，从而进入下一页。可以想象，这个过程是 Ajax 的，页面会平滑的跳转并且会有过场动画，这样从视觉上看，可以很好的做出原生 App 中常见的滑动翻页功能。当然，这些是基于浏览器的，如果用户的移动设备配置不高的话，会很容易造成画面不流畅等降低用户体验的情况，这也是 Kayo 在前文中建议不要使用过于炫丽的过场动画（如 3D transforms）的原因之一。

通过上面的例子，不难看出 jQuery Mobile 的强大和方便，它考虑了很多开发 Web App 需要用到的功能。至于 jQuery Mobile 的详细事件，Kayo 将会在下文中详细说明。

三.完整 Demo

本例子对上面提到的自定义 jQuery Mobile 默认配置和滑动事件绑定进行测试，滑动事件是为触摸设备而设计的，因此建议你使用触摸设备进行测试，若使用 PC 环境测试，jQuery Mobile 也会检测鼠标操作代替触摸操作，具体的操作是按住鼠标左键进行滑动，jQuery Mobile 的默认滑动有效距离是 30px，因此测试时只需滑动一小段距离即可触发滑动。具体的完整代码可以打开 Demo 后直接查看文档的源码。

完整 Demo（建议使用 PC 上的 Firefox、Chrome 等现代浏览器和 IE9+ 或 Android , iPhone/iPad 的系统浏览器浏览）

本文由 Kayo Lee 发表，本文链接：http://kayosite.com/web-app-by-jquery-mobile-and-html5-config-events-basis.html