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

JQuery Mobile中特有事件和方法是本文要介紹的內(nèi)容，主要是來(lái)了解JQuery Mobile中的事件和方法的應(yīng)用，具體內(nèi)容來(lái)看本文詳解。

1、觸摸屏事件—— Touch events

tap  

Triggers after a quick, complete touch event. 

本人實(shí)際測(cè)試效果：輕輕點(diǎn)擊，效果和按普通按鈕差不多。

taphold  

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

本人實(shí)際測(cè)試效果：按住一會(huì)兒，大約1秒，即觸發(fā)。很頂用。

swipe  

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

本人實(shí)際測(cè)試效果：不懂，不會(huì)用

swipeleft  

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

本人實(shí)際測(cè)試效果：在觸摸屏幕上向左滑動(dòng)，很好用。

PS：在電腦上你也可以用，按住鼠標(biāo)向左拖就可以了。

swiperight  

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

本人實(shí)際測(cè)試效果：在觸摸屏幕上向右滑動(dòng)，很好用。

PS：在電腦上你也可以用，按住鼠標(biāo)向右拖就可以了。

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

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

changepage('up');  

}); 

2、重力感應(yīng)事件—— 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. 

對(duì)應(yīng)于手機(jī)上重力感應(yīng)功能，當(dāng)顯示效果從垂直變?yōu)樗�平，或由水平變�(yōu)榇怪睍r(shí)觸發(fā)。本人沒(méi)用上該效果。

3、滾動(dòng)條事件——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. 

個(gè)人測(cè)試效果：當(dāng)滾動(dòng)條觸發(fā)時(shí)使用。

scrollstop  

Triggers when a scroll finishes. 

個(gè)人測(cè)試效果：當(dāng)滾動(dòng)條停止時(shí)使用，利用這個(gè)你可以讓其返回當(dāng)前滾動(dòng)條的位置信息并記錄下來(lái)。

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

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

}); 

上面用一個(gè)ID名為hidescroll的影藏hidden控件保存了當(dāng)前滾動(dòng)條的位置信息。如果想使用后退頁(yè)面時(shí)返回當(dāng)前滾動(dòng)條的位置，就請(qǐng)把這個(gè)hidescroll的值一并傳輸過(guò)去吧，不論是用get還是post。并且記得在頁(yè)面寫上：

$(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. 

這四個(gè)事件的好處是，在頁(yè)面的加載過(guò)程中你可以干些事。

比如，在加載的時(shí)候添加loading畫面：

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

在加載完成后影藏loading畫面：

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

5、頁(yè)面創(chuàng)建事件：Page initialization events

pagebeforecreate  

Triggered on the page being initialized, before initialization occurs.  

pagecreate  

Triggered on the page being initialized, after initialization occurs. 

有時(shí)候你會(huì)遇到這種情況：一個(gè)頁(yè)面，已經(jīng)填寫了一些自定義信息，你需要依靠這些信息初始化一個(gè)新頁(yè)面。我遇到的例子是，我的文件列表一刷新，點(diǎn)擊其中任意一個(gè)文件可以顯示一個(gè)對(duì)話框，這個(gè)對(duì)話框要顯示你點(diǎn)擊的這個(gè)文件的名字，和其他操作。新頁(yè)面并不知道你點(diǎn)的是哪個(gè)文件，總不能再查詢一遍吧？這個(gè)時(shí)候你就需要Page initialization events事件了，把你點(diǎn)擊的文件名傳過(guò)去。

$('#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官網(wǎng)給出的兩個(gè)例子，,允許你操縱一個(gè)頁(yè)面pre-or-post初始化,相對(duì)于頁(yè)面顯示/隱藏事件，創(chuàng)建事件只會(huì)在初始化網(wǎng)頁(yè)的時(shí)起作用。

值得注意的是，在Jquery mobile 1.0a2版本，加載對(duì)話框等東西進(jìn)來(lái)，實(shí)際是用ajax方法將對(duì)話框以div role="page"模式加入當(dāng)前頁(yè)面。這個(gè)新加入的div,用ID保存它被ajax進(jìn)來(lái)時(shí)的路徑。

例如，我的主頁(yè)mian.php有一個(gè)a標(biāo)簽：

<a href="dialog/search.php" type="GBK" data-rel="dialog" data-transition="slide"  data-icon="search"  data-iconpos="top" >簡(jiǎn)單搜索</a> 

點(diǎn)擊這個(gè)標(biāo)簽的結(jié)果是，在mian.php中，被ajax加入了一個(gè)id="dialog/search.php"的div，這個(gè)div, role="page"，其內(nèi)容就是文件search.php中body里的內(nèi)容。

這樣做，導(dǎo)致當(dāng)下次再點(diǎn)擊同一個(gè)連接的時(shí)候，實(shí)際相當(dāng)于顯示已被加載進(jìn)來(lái)的page，加載速度當(dāng)然很快。但是,這意味著你的ID屬性已經(jīng)不再是原來(lái)頁(yè)面的一部分，而是當(dāng)前頁(yè)面的一個(gè)div，所以你必須記住當(dāng)綁定到頁(yè)面,pagecreate事件(pagebeforecreate等等)。

避免這個(gè)問(wèn)題的方法是用class代替id。好在我在我的程序里幾乎沒(méi)有遇到這個(gè)問(wèn)題，因?yàn)槲腋�本沒(méi)有用Page initialization events事件，在初始化一些對(duì)話框的時(shí)候，我在主頁(yè)的JS中做操作，修改對(duì)話框中的元素（因?yàn)槲抑�道這些對(duì)話框顯示的時(shí)候就已經(jīng)是主頁(yè)的一個(gè)div了，我要的ID總會(huì)找到）。不過(guò)這樣做的結(jié)果是，Jquery mobile 1.0a3版本導(dǎo)致了我所有對(duì)話框的失效……算了，哥不更新了， 等beta版出來(lái)還不行么。

6、常用函數(shù)、方法

顯示或影藏jquery自帶的loading畫面

//cue the page loader  

$.mobile.pageLoading();   

//hide the page loader  

$.mobile.pageLoading( true );  

跳轉(zhuǎn)到另一個(gè)頁(yè)面上

//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); 

設(shè)置滾頓條位置

//scroll to Y 100px   

$.mobile.silentScroll(100); 

設(shè)置根據(jù)顯示時(shí)寬度的最大最小信息設(shè)置html斷點(diǎn)，我沒(méi)用過(guò)，我猜會(huì)讓斷點(diǎn)以后的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]); 

除此以外還有其他一些方法，我都沒(méi)用過(guò)，也沒(méi)需要去用。等beta1的文檔出來(lái)了再看吧。

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)