html5 jquery mobile 例子
jQuery Mobile 在原生事件的基础上，创建了一系列自定义事件。这些事件大多是针对触摸设备的使用场景开发的，不过对于桌面环境也有相应的处理机制。开发者可以使用 bind() 函数将这些事件绑定到所需的页面对象上。
需要注意的是，jQuery Mobile 基于 Ajax 导航，使用 bind() 方法绑定的事件无法作用于通过 Ajax 生成的网页元素。因此，建议开发者使用动态绑定方法，如 live()、delegate()，将事件动态绑定到相应元素上。live()、delegate() 等方法可以让 jQuery Mobile 选择器选中的 DOM 元素在整个 DOM 范围内持久化。这意味着，无论元素是预先存在的，还是通过 Ajax 动态加载的，事件都会被绑定，就像使用 CSS 为元素添加样式一样。在对 Ajax 依赖较大的网站开发中，这一点必须引起重视。
在了解了 jQuery Mobile 的基本情况后，下面将详细介绍 jQuery Mobile 中的各类事件。
jQuery Mobile 事件可分为 7 个部分：触摸事件（Touch events）、虚拟鼠标事件（Virtual mouse events）、页面事件（Page events）、设备方向变化事件（Orientation change event）、滚屏事件（Scroll events）、布局事件（Layout events）和动画事件（Animation Events）。其中，页面事件又可细分为页面加载事件（Page load events）、页面跳转事件（Page change events）、页面显示/隐藏事件（Page show/hide events）、页面初始化事件（Page initialization events）和页面移除事件（Page remove events）。由于页面事件较多，且涉及 jQuery 中较复杂的对象使用，将另写文章进行介绍。下面将分别详细介绍除页面事件之外的其他事件。
一、触摸事件（Touch events）
- tap（轻击）：一次快速完整的轻击操作完成后触发。
- taphold（轻击不放）：轻击元素并保持 750ms（该时间可自定义）后触发。
- swipe（划动）：在 1s（该时间可自定义）内，水平拖拽距离大于 30px，同时垂直方向拖曳距离小于 75px 时触发。
- swipeleft（左划）：当划动方向为向左时触发。
- swiperight（右划）：当划动方向为向右时触发。
除了默认配置，jQuery Mobile 还有一些拓展配置可供自定义，其中包括部分事件配置。
taphold（轻击不放）
默认情况下，taphold 的触发条件是轻击（tap）元素超过 750ms，该条件可自定义，方法与自定义默认配置相同。具体选项如下：
$.event.special.tap.tapholdThreshold（默认值：750ms）：该值决定了轻击元素超过此时间才会触发 taphold 事件。
swipe（划动）
默认情况下，swipe 的触发条件是在 1s 内水平拖曳大于 30px，同时垂直方向拖曳小于 75px，这些条件也可自定义。具体选项如下：
$.event.special.swipe.scrollSupressionThreshold（默认值：10px）：当水平拖曳距离大于此值时，jQuery Mobile 会抑制页面滚动。$.event.special.swipe.durationThreshold（默认值：1000ms）：划动时间超过此值时，本次拖曳不会触发 swipe 事件。$.event.special.swipe.horizontalDistanceThreshold（默认值：30px）：水平拖曳距离超过此值时才会触发 swipe 事件。$.event.special.swipe.verticalDistanceThreshold（默认值：75px）：垂直拖曳距离小于此值时才会触发 swipe 事件。
注意，jQuery Mobile 中描述宽度、高度、距离使用的单位是 px，实际使用时默认以此为单位，无需额外填写单位。例如：
$.event.special.swipe.horizontalDistanceThreshold = 100;
从上述触摸事件可以看出，jQuery Mobile 与 jQuery 有较大区别。之前介绍过，jQuery Mobile 更像是一个 UI 库，适合快速移动开发，可用于快速制作 Web Apps。结合本文介绍的各种触摸事件，使用 jQuery Mobile 能够开发出完善的 Web Apps。如果开发者熟悉 jQuery，开发过程将更加高效。
二、虚拟鼠标事件（Virtual mouse events）
jQuery Mobile 是为触摸设备设计的，同时对 PC 等桌面环境也有良好的支持（对于非触摸的移动设备也有完善的处理机制）。然而，触摸设备和桌面环境的鼠标操作存在很大差异，触摸设备使用触摸输入替代鼠标输入。因此，jQuery Mobile 创建了虚拟鼠标事件，以整合两种环境下的事件差异。
虚拟鼠标事件保留了桌面环境下鼠标操作的一些特性，例如：vmouseup 总是在 vmousedown 之后被触发，vmousedown 总是在 vmouseup 之前被触发，并且可以获取事件对象的 pageX、pageY、screenX、screenY、clientX、clientY 等属性。
vmouseover：处理触摸设备下的touch或桌面环境下的mouseover事件。vmousedown：处理触摸设备下的touchstart或桌面环境下的mousedown事件。vmousemove：处理触摸设备下的touchmove或桌面环境下的mousemove事件。vmouseup：处理触摸设备下的touchend或桌面环境下的mouseup事件。vclick：处理触摸设备下的touchend或桌面环境下的click事件。在触摸设备上，该事件会在vmouseup事件之后触发。vmousecancel：处理触摸设备下的touch或桌面环境下的mousecancel事件。
特别需要注意的是，使用 vclick 时要谨慎。在触摸设备中使用 vclick 时，Webkit 内核的浏览器会在 touchend 事件触发后生成 mousedown、mouseup 和 click 事件。这些事件的目标对象会在触发时基于 touch 事件的位置计算得出。在某些情况下（不同设备或不同 OS），可能会导致计算结果出现差异，这意味着实际点击的目标和最终目标可能不同。因此，jQuery Mobile 建议开发者在容易出现上述情况（如显示/隐藏元素、屏幕过场等内容大量改变的情况）时，使用 click 代替 vclick 事件。
三、设备方向变化事件（Orientation change event）
在 jQuery Mobile 中，最令人惊喜的 API 当属设备方向变化事件 orientationchange，这也是 jQuery Mobile 中唯一的设备方向变化事件。当设备方向发生变化（即设备在横向和纵向之间转换）时，会触发该事件。事件回调函数的事件对象（e 或 event）中会封装一个 orientation 属性，其值为 "portrait" 或 "landscape"，用于描述设备是变为纵向还是横向时触发的事件。
关于 orientationchange 事件绑定的对象，可以选择在设备方向变化时受影响较大的元素。但考虑到大多数元素难以准确预测其变化是否足以触发该事件，建议将 orientationchange 事件绑定到 window 对象上，这种绑定方式最为稳定有效。例如：
$(window).bind('orientationchange', function(e) {
if (e.orientation === "portrait") {
alert('portrait');
}
if (e.orientation === "landscape") {
alert('landscape');
}
});
当设备不支持 orientationchange 事件时，jQuery Mobile 会使用 resize 事件代替。resize 事件是 JavaScript 中的原生事件，当页面窗口大小改变时触发。另外，将 $.mobile.orientationChangeEnabled 设置为 false 可以禁止 orientationchange 事件，使用 resize 事件替代。
需要扩展说明的是，orientationchange 事件的触发时间与客户端高度、宽度变化的关系在不同浏览器中可能不同。尽管 jQuery Mobile 会从 window.orientation 中获取正确的窗口角度并赋予 event.orientation 处理，但由于最终的变化规律在浏览器间存在差异，如果触发该事件的时间对客户端高度、宽度变化有精确依赖，开发者可以设置 $.mobile.orientationChangeEnabled = false 禁止触发 orientationchange 事件，并在 resize 的回调函数中判断高度和宽度变化，以达到更精确的效果。
四、滚屏事件（Scroll events）
scrollstart
当页面开始滚动时，会触发 scrollstart 事件。由于 IOS 设备在页面滚动时会冻结 DOM 操作，并将这些操作加入队列，在页面滚动结束时按队列执行。虽然 jQuery Mobile 努力让设备在页面滚动开始前执行 DOM 操作，但考虑到最终 Web Apps 的兼容性，不建议在 scrollstart 的回调函数中执行 DOM 操作。
scrollstop
当页面滚动结束时，会触发 scrollstop 事件。
五、布局事件（Layout events）
页面中的一些组件，如可折叠模块（collapsible）、列表组件搜索（listview search）或 jQuery 的显示/隐藏（show/hide）等方法，可能会导致页面内容大小发生较大变化，或者使页面产生滚动条，从而影响页面布局。这会对一些依赖页面布局的组件，如固定的顶部工具栏（fixed headers）造成干扰。
当出现上述情况时，jQuery Mobile 会触发 updatelayout 事件，通知其他组件调整布局以适应页面变化。为确保该过程顺利进行，也可以手动触发此事件。例如：
$(function() {
$('#aside').hide().trigger('updatelayout');
$(document).bind("updatelayout", function(event, ui) {
// 调整组件
});
});
六、动画事件（Animation Events）
jQuery Mobile 提供了 animationComplete 事件，在页面转场等 jQuery Mobile 动画结束时触发。可以利用该事件，配合添加或删除一个 class 来实现自定义的过场效果（为新页面添加一个 class，添加自定义的 CSS3 动画，使用 pagehide 判断旧页面已隐藏，再使用 animationComplete 判断新页面动画已结束，然后移除 class）。例如：
$(document).bind('pagehide', function(event, ui) {
$(ui.nextPage).animationComplete(function() {
// 移除相应的 class
});
});
七、事件应用实例
为了帮助大家更好地理解上述内容，下面列举一些 jQuery Mobile 事件应用的实例。
修改配置例子
如前文所述，jQuery Mobile 为部分事件的触发条件提供了灵活的自定义参数，自定义方式与修改 jQuery Mobile 默认配置相同，只是拓展的对象不同。例如：
$(document).bind('mobileinit', function() {
$.event.special.swipe.horizontalDistanceThreshold = 100; // 修改触发 swipe 事件的最小水平拖曳距离为 100(px)
$.event.special.swipe.verticalDistanceThreshold = 120; // 修改触发 swipe 事件的最大垂直拖曳距离为 120 (px)
$.mobile.orientationChangeEnabled = false; // 默认禁止触发 orientationChangeEnabled
});
需要注意的是，不能使用前文自定义默认配置时利用 jQuery 的 $.extend 扩展 $.event 对象的方法来扩展 $.event 对象，只有 $.mobile 可以使用 $.extend 扩展对象。因此，事件 API 中只有 $.mobile.orientationChangeEnabled 可以使用 $.extend 方法进行自定义。
触摸事件使用例子
下面的例子使用 live() 为两个页面的 body 元素分别绑定 swiperight 和 swipeleft 事件，这样在页面上向右划动和向左划动可以实现两个页面之间的切换。该例子结合了“修改配置例子”中的调整，将触发 swipe 事件的最小水平拖曳距离和最大垂直拖曳距离分别修改为 100 和 120。读者可以尝试水平划动默认的 30px 或垂直方向滑动超过默认的 75px，以检测修改是否生效。
为达到最佳效果，建议在支持触摸的设备上测试。若使用桌面环境测试，建议在页面空白处点击鼠标划动。由于划动距离已自定义为较大值，划动时若没有效果，可适当加大划动距离。
jQuery Mobile 代码
$(document).bind('mobileinit', function() {
$.event.special.swipe.horizontalDistanceThreshold = 100; // 修改触发 swipe 事件的最小水平拖曳距离为 100(px)
$.event.special.swipe.verticalDistanceThreshold = 120; // 修改触发 swipe 事件的最大垂直拖曳距离为 120 (px)
});
$(function() {
$("#home").live('swipeleft', function() {
$('#toPage2').click(); // 为首页绑定向左划动事件
});
$("#page-2").live('swiperight', function() {
$('#toHome').click(); // 为另一页面绑定向右划动事件
});
});
主要 HTML 代码
<div data-role="page" id="home">
<div data-role="header">
<h1>jQuery Mobile Demo</h1>
</div>
<div data-role="content">
<p>本例子中，为两个页面的 body 元素分别绑定了 swipeleft 和 swiperight ，划动后分别触发相应的链接，转到另一个页面，另外使用 data-transition="slide" 把页面过场改为“滑动”效果，从而达到 Apps 中常用的滑动换页效果。</p>
<a id="toPage2" href="#page-2" data-role="button" data-transition="slide" data-theme="b">向左滑动触发我这个链接</a>
</div>
<div data-role="footer">
<h2>Demo By <a href="http://kayosite.com" target="_blank" style="text-decoration: none; ">Kayo</a></h2>
</div>
</div>
<div data-role="page" id="page-2">
<div data-role="header">
<h1>jQuery Mobile Demo</h1>
</div>
<div data-role="content">
<a id="toHome" href="#home" data-role="button" data-theme="b" data-transition="slide" data-direction="reverse" data-rel="back">向右滑动触发我这个链接</a>
</div>
<div data-role="footer">
<h2>Demo By <a href="http://kayosite.com" target="_blank" style="text-decoration: none; ">Kayo</a></h2>
</div>
</div>
八、完整 Demo
完整 Demo（建议使用 PC 上的 Firefox、Chrome 等现代浏览器和 IE9+ 或 Android、iPhone/iPad 的系统浏览器浏览）。