jquery mobile 針對移動端設備的事件類型。

 　　1.touch 事件。

 　　　　tap 快速觸摸屏幕并且離開，類似一種完整的點擊操作。
 　　　　taphold 觸摸屏幕并保持一段時間。
 　　　　swipe 在1秒內(nèi)水平移動30px屏幕像素上時觸發(fā)。
 　　　　swipeleft 向左側(cè)滑動
 　　　　swiperight 像右側(cè)滑動。

 　　2.方向改變事件

 　　　　orientationchange 事件函數(shù)當移動設備的方向發(fā)生改變觸發(fā)，在事件的回調(diào)函數(shù)內(nèi)的第二個參數(shù)返回一個用于識別當前方向的參數(shù)，
 　　　　該參數(shù)有兩種返回值：portrait(縱向)landscarp(橫向)。

 　　3.滾動事件，

 　　　　scrollstart 開始滾動時候觸發(fā)該事件。
 　　　　scrollend 滾動結(jié)束時觸發(fā)該事件。

 　　4.顯示/隱藏

 　　　　pagebeforeshow 當視圖通過動畫效果開始顯示在屏幕之前觸發(fā)事件。
 　　　　pagebeforehide 當視圖通過動畫效果開始隱藏之前觸發(fā)事件，
 　　　　pageshow 當視圖通過動畫效果顯示在屏幕之后觸發(fā)事件。
 　　　　pagehide 當視圖通過動畫效果隱藏后觸發(fā)。

　　　　示例代碼： 　　　　

　　$("div").live("pageshow",function(event,ui){ 
　　　　　　　　alert("this page just hidden"+ui.prevPage)
　　　　　　})

　　5.模擬鼠標事件

 　　　　vmouseover 統(tǒng)一處理觸摸和鼠標懸停事件。
 　　　　vmousedown 統(tǒng)一處理觸摸和鼠標按下事件。
 　　　　vmousemove 統(tǒng)一處理觸摸和鼠標移動事件。
 　　　　vmouseup 統(tǒng)一處理觸摸和鼠標按鍵松開事件。
 　　　　vclick 統(tǒng)一處理觸摸和鼠標點擊事件。
 　　　　vmousecancel 統(tǒng)一處理觸摸和鼠標l離開事件。

頁面視圖輔助工具

 　　1. $.mobile.changePage

　　　　通過函數(shù)編程的方式改變兩個視圖之間切換效果。通常在點擊超鏈接或提交表單的時候自定義切換效果。

 　　　　語法： 　　　　　

　$.mobile.changePage(to,options);
　　　　　　to 是必選參數(shù)， 可以傳遞的參數(shù)類型包括字符串，對象。
 　　　　　　options 可選，傳遞的是一個JSON 數(shù)據(jù)格式對象，
 　　　　　　用法： 以下實例將改變decondPage.html 的頁面效果
 　　　　　　$.mobile.changePage("secondPage.html",{ 
　　　　　　　　transition:"slidedown"
　　　　　　}) 

　　　表單提交操作　　　

　$.mobile.changePage("submit.php",{ 
　　　　　　type:"post";
　　　　　　data:$("form#add").seriaize();
　　　　})

 　　2.$.mobile.loaPage

　　　　主要的作用是加載外部頁面，并插入當前頁面的DOM元素內(nèi)。
 　　　　$.mobile.loadPage(url,options);
　　　　url 是一個必選參數(shù)，傳遞一個絕對或者相對的 URL 地址
 　　　　options 可選參數(shù)，傳遞的是一個JSON 數(shù)據(jù)對象。

　　示例：　　　

$.mobile.loadPage("secomdPage.html");
　　　　　提交表單并加載結(jié)果頁面：
 　　　　$.mobile.loadPage("result.php",{ 
　　　　　　type:"get",
　　　　　　data:$("form#search").serizlize();
　　　　})

數(shù)據(jù)存儲：

 　　1.jqmData()方法;

　　　　可以在元素上綁定任意數(shù)據(jù)。

 　　　　$.mobile.jqmData(element,key,value)
　　　　　　element 參數(shù)是指定需要綁定數(shù)據(jù)的元素；
 　　　　　　key 需要綁定數(shù)據(jù)的屬性名，
 　　　　　　value 綁定的數(shù)據(jù)。

 　　2.jqmRemoveData() 方法：

 　　　　該方法是移除綁定在元素上的data數(shù)據(jù)，
 　　　　$.mobile.jqmRemoveData([name])
　　　　　　name 是可選參數(shù)，指定需要移除哪個data屬性，如果不穿參數(shù)，則需要移除元素上的所有數(shù)據(jù)。

 　　3.jqmHasData() 方法

 　　　　　　判斷元素上是否存在綁定 的數(shù)據(jù)，
 　　　　　　$.mobile.jqmHasData(element);
　　　　　　element 參數(shù)是一個進行數(shù)據(jù)檢查的DOM元素。

地址路徑輔助工具：

 　　1.解析URL 地址

 　　　　$.mobile.path.parseUrl 函數(shù)解析一個Url 指定， 并返回一個含有所有參數(shù)值的對象，讓我們很輕易的訪問Url地址上的參數(shù)屬性。

 　　　　parseUrl 函數(shù)的語法

 　　　　$.mobile.path.parseUrl(url);
　　　　　　url 參數(shù)是一個相對或者絕對的URL地址，必選傳入的參數(shù)。
 　　　　　　parseUrl 函數(shù)返回一個對象，對象內(nèi)包含豐富的屬性。
 　　　　　　屬性： hash 說明：#號后面的所有的字符內(nèi)容，相當于location 的hash
　　　　　　屬性： host 說明：URL的主機名和端口號
 　　　　　　屬性: hostname 說明：返回只包含URL 的主機名。
 　　　　　　屬性： href 說明：返回整個URL地址。
 　　　　　　屬性： pathname 說明:返回文件或目錄的關聯(lián)路徑
 　　　　　　屬性： port 說明：請求返回Url的端口號
 　　　　　　屬性：portocol 說明：返回請求Url 地址的協(xié)議，如 http https
　　　　　　屬性：search 說明：返回地址中“？”后面的請求參數(shù)
 　　　　　　屬性：authority 說明：返回用戶名，密碼，主機名，端口號組成的地址，
 　　　　　　屬性：directiry 說明：返回請求URL地址的目錄路徑，
 　　　　　　屬性：domain 說明：返回 protocal 協(xié)議和authority 組成的路徑
 　　　　　　屬性：filename 說明：返回請求的Url文件名
 　　　　　　屬性：hrefOfHash 說明：返回不包含hash 值的URL 路徑。
 　　　　　　屬性：hrefOfSearch 說明：返回不包含請求參數(shù)和hash值的URL 路徑。
 　　　　　　屬性：password 說明：返回請求URL 中的密碼 如ftp 協(xié)議密碼。
 　　　　　　屬性： username 說明：返回請求URL中的用戶名，如ftp 協(xié)議的用戶名。

loading 顯示/隱藏

 　　　　顯示loading 對話框的方法是
 　　　　　　$.mobile.showPageLoadingMse();
 　　　　隱藏loading 對話框的方法是
 　　　　　　$.mobile.hidePageLoadingMse();

 JQuery Mobile 和 HTML5 的 3個優(yōu)點

 1. 上手迅速并支持快速迭代：在一個星期多一點的時間里，通過閱讀JQuery Mobile文檔以及O'Reilly出版的JQuery Mobile書籍，我完成了一個可以工作的app初步版本。在此之前我沒有HTML5 / JQuery Mobile開發(fā)經(jīng)驗。與Android和iOS相比，使用JQuery Mobile和HTML5構(gòu)建你的UI和邏輯會比在原生系統(tǒng)下構(gòu)建快得多。

譯注：原生系統(tǒng)：原裝的操作系統(tǒng)，例如Android原生系統(tǒng)是Google發(fā)布未經(jīng)修改的系統(tǒng)。在本文中，原生應用指直接用系統(tǒng)提供的API開發(fā)的程序，與JQuery Mobile開發(fā)的程序相對應。

我發(fā)現(xiàn)Apple的Builder接口的學習曲線十分陡峭，同樣學習令人費解的Android布局系統(tǒng)也很耗時間。此外，要使用原生代碼將一個list view連接到遠程的數(shù)據(jù)源并具有漂亮的外觀是十分復雜的（在Android上是ListView, 在iOS上是UITableView）我能夠通過已經(jīng)掌握的JavaScript和HTML/CSS知識快速地實現(xiàn)同樣的功能，無需學習新的adapter,delegate等等抽象概念，只要編寫JQuery代碼就可以做到。

2.避免麻煩的應用商店審批過程以及調(diào)試、構(gòu)建帶來的痛苦：為手機開發(fā)應用，尤其是iOS系統(tǒng)的手機，最痛苦的過程莫過于通過Apple應用商店的審批。想要讓一個原生應用程序發(fā)布給iOS用戶，你需要等待一個相當長的過程（需要好幾天，甚至可能是好幾周）。不僅在第一次發(fā)布程序時要經(jīng)歷磨難，以后的每一次升級也是如此。這使得QA和發(fā)布流程變得復雜，還會增加額外的時間。由于JQuery Mobile應用程序僅僅是一種web應用程序，因此它繼承了所有web環(huán)境的優(yōu)點：當用戶加載你的網(wǎng)站時，他們就馬上“升級”到最新的版本?？梢择R上修復bug和添加新的特性。即使是在Android系統(tǒng)——應用市場的要求比起Apple環(huán)境要寬松得多，在用戶不知不覺中完成產(chǎn)品升級也是一件很好的事情。

進一步的好處是，發(fā)布beta或測試版本會更加容易。只要告訴用戶用瀏覽器打開你的網(wǎng)址就可以了！不需要考慮iOS令人抓狂的DRM，也不需要理會Android必須的APK。

3.支持跨平臺和跨設備開發(fā)：一個巨大的好處是，我的應用程序馬上可以在Android和IOS上工作，同樣也可以在其他平臺上工作。作為一個獨立開發(fā)者，為不同的平臺維護基礎代碼是一項巨大的工作。為單個手機平臺編寫高質(zhì)量的手機應用需要全職工作，為每個平臺重復做類似的事情需要大量的資源。應用程序能夠在Android和IOS設備上同時工作對我來說是一個巨大收獲。

更進一步，尤其是對于運行Android各種分支的設備，它們大小和形狀各異，想要讓你的應用程序在各種各樣屏幕分辨率的手機上看起來都不錯，這是真正的挑戰(zhàn)。對于要求嚴格的Android開發(fā)者來說，按照屏幕大小進行設屏幕分割（從完全最小化到最大進行縮放）會需要很多開發(fā)時間。由于瀏覽器會在每個設備上以相同的方式呈現(xiàn)，關于這個方面你不必有任何擔心。

最新評論