詳解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)