详解JQuery Mobile中特有事件和方法

JQuery Mobile中特有事件和方法是本文要介绍的内容，主要是来了解JQuery Mobile中的事件和方法的应用，具体内容来看本文详解。

1、触摸屏事件—— Touch events

tap

Triggers after a quick, complete touch event.

本人实际测试效果：轻轻点击，效果和按普通按钮差不多。

taphold

Triggers after a held complete touch event (close to one second).

本人实际测试效果：按住一会儿，大约1秒，即触发。很顶用。

swipe

Triggers when a horizontal drag of 30px or more (and less than 20px vertically) occurs within 1 second duration.

本人实际测试效果：不懂，不会用

swipeleft

Triggers when a swipe event occurred moving in the left direction.

本人实际测试效果：在触摸屏幕上向左滑动，很好用。

PS：在电脑上你也可以用，按住鼠标向左拖就可以了。

swiperight

Triggers when a swipe event occurred moving in the right direction.

本人实际测试效果：在触摸屏幕上向右滑动，很好用。

PS：在电脑上你也可以用，按住鼠标向右拖就可以了。

使用方法：用live或者bind绑定到dom元素上即可，我是这么用的（以下的类似）：

$('#wlist').live('swipeleft',function(){

changepage('up');

});

2、重力感应事件—— Orientation change event

orientationchange

Triggers when a device orientation changes (by turning it vertically or horizontally).

When bound to this event, your callback function can leverage a second argument,

which contains an orientationproperty equal to either "portrait" or "landscape".

These values are also added as classes to the HTML element, allowing you to leverage them in your CSS selectors.

Note that we currently bind to the resize event when orientationChange is not natively supported.

对应于手机上重力感应功能，当显示效果从垂直变为水平，或由水平变为垂直时触发。本人没用上该效果。

3、滚动条事件——Scroll events

scrollstart

Triggers when a scroll begins. Note that iOS devices freeze DOM manipulation during scroll,

queuing them to apply when the scroll finishes.

We're currently investigating ways to allow DOM manipulations to apply before a scroll starts.

个人测试效果：当滚动条触发时使用。

scrollstop

Triggers when a scroll finishes.

个人测试效果：当滚动条停止时使用，利用这个你可以让其返回当前滚动条的位置信息并记录下来。

$('body').live('scrollstop',function(){

$(‘#hidescroll’).val( $(this).scrollTop );

});

上面用一个ID名为hidescroll的影藏hidden控件保存了当前滚动条的位置信息。如果想使用后退页面时返回当前滚动条的位置，就请把这个hidescroll的值一并传输过去吧，不论是用get还是post。并且记得在页面写上：

$(document).ready(function(){ // document.body.scrollTop = $(‘#hidescroll’).val();});

4、面显示影藏事件——Page show/hide events

pagebeforeshow

Triggered on the page being shown, before its transition begins.

pagebeforehide

Triggered on the page being hidden, before its transition begins.

pageshow

Triggered on the page being shown, after its transition completes.

pagehide

Triggered on the page being hidden, after its transition completes.

这四个事件的好处是，在页面的加载过程中你可以干些事。

比如，在加载的时候添加loading画面：

$('div').live('pagebeforeshow',function(){$.mobile.pageLoading();});

在加载完成后影藏loading画面：

$('div').live('pageshow',function(){$.mobile.pageLoading(true);});

5、页面创建事件：Page initialization events

pagebeforecreate

Triggered on the page being initialized, before initialization occurs.

pagecreate

Triggered on the page being initialized, after initialization occurs.

有时候你会遇到这种情况：一个页面，已经填写了一些自定义信息，你需要依靠这些信息初始化一个新页面。我遇到的例子是，我的文件列表一刷新，点击其中任意一个文件可以显示一个对话框，这个对话框要显示你点击的这个文件的名字，和其他操作。新页面并不知道你点的是哪个文件，总不能再查询一遍吧？这个时候你就需要Page initialization events事件了，把你点击的文件名传过去。

$('#aboutPage').live('pagebeforecreate',function(event){

alert('This page was just inserted into the dom!');

});

$('#aboutPage').live('pagecreate',function(event){

alert('This page was just enhanced by jQuery Mobile!');

});

上面是jquery mobile官网给出的两个例子，,允许你操纵一个页面pre-or-post初始化,相对于页面显示/隐藏事件，创建事件只会在初始化网页的时起作用。

值得注意的是，在Jquery mobile 1.0a2版本，加载对话框等东西进来，实际是用ajax方法将对话框以div role="page"模式加入当前页面。这个新加入的div,用ID保存它被ajax进来时的路径。

例如，我的主页mian.php有一个a标签：

点击这个标签的结果是，在mian.php中，被ajax加入了一个id="dialog/search.php"的div，这个div, role="page"，其内容就是文件search.php中body里的内容。

这样做，导致当下次再点击同一个连接的时候，实际相当于显示已被加载进来的page，加载速度当然很快。但是,这意味着你的ID属性已经不再是原来页面的一部分，而是当前页面的一个div，所以你必须记住当绑定到页面,pagecreate事件(pagebeforecreate等等)。

避免这个问题的方法是用class代替id。好在我在我的程序里几乎没有遇到这个问题，因为我根本没有用Page initialization events事件，在初始化一些对话框的时候，我在主页的JS中做操作，修改对话框中的元素（因为我知道这些对话框显示的时候就已经是主页的一个div了，我要的ID总会找到）。不过这样做的结果是，Jquery mobile 1.0a3版本导致了我所有对话框的失效……算了，哥不更新了，等beta版出来还不行么。

6、常用函数、方法

显示或影藏jquery自带的loading画面

//cue the page loader

$.mobile.pageLoading();

//hide the page loader

$.mobile.pageLoading( true );

跳转到另一个页面上

//transition to the "about us" page with a slideup transition

$.mobile.changePage("about/us.html", "slideup");

//transition to the "search results" page, using data from a form with an ID of "search""

$.mobile.changePage({ url: "searchresults.php", type: "get", data: $("form#search").serialize() });

//transition to the "confirm" page with a "pop" transition without tracking it in history

$.mobile.changePage("../alerts/confirm.html", "pop", false, false);

设置滚顿条位置

//scroll to Y 100px

$.mobile.silentScroll(100);

设置根据显示时宽度的最大最小信息设置html断点，我没用过，我猜会让断点以后的html不显示。$.mobile.addResolutionBreakpoints (method)Add width breakpoints to the min/max width classes that are added to the HTML element.

//add a 400px breakpoint

$.mobile.addResolutionBreakpoints(400);

//add 2 more breakpoints

$.mobile.addResolutionBreakpoints([600,800]);

除此以外还有其他一些方法，我都没用过，也没需要去用。等beta1的文档出来了再看吧。

jqmData(), jqmRemoveData(), and jqmHasData() (method)

$.mobile.path (methods, properties)Utilities for getting, setting, and manipulating url paths. TODO: document as public API is finalized.

$.mobile.base (methods, properties)Utilities for working with generated base element. TODO: document as public API is finalized.

$.mobile.activePage (property)