jquery mobile 針對移動端設(shè)備的事件類型。
1.touch 事件。
tap 快速觸摸屏幕并且離開,類似一種完整的點擊操作。
taphold 觸摸屏幕并保持一段時間。
swipe 在1秒內(nèi)水平移動30px屏幕像素上時觸發(fā)。
swipeleft 向左側(cè)滑動
swiperight 像右側(cè)滑動。
2.方向改變事件
orientationchange 事件函數(shù)當移動設(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 說明:返回文件或目錄的關(guān)聯(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)站時,他們就馬上“升級”到最新的版本。可以馬上修復bug和添加新的特性。即使是在Android系統(tǒng)——應用市場的要求比起Apple環(huán)境要寬松得多,在用戶不知不覺中完成產(chǎn)品升級也是一件很好的事情。
進一步的好處是,發(fā)布beta或測試版本會更加容易。只要告訴用戶用瀏覽器打開你的網(wǎng)址就可以了!不需要考慮iOS令人抓狂的DRM,也不需要理會Android必須的APK。
3.支持跨平臺和跨設(shè)備開發(fā):一個巨大的好處是,我的應用程序馬上可以在Android和IOS上工作,同樣也可以在其他平臺上工作。作為一個獨立開發(fā)者,為不同的平臺維護基礎(chǔ)代碼是一項巨大的工作。為單個手機平臺編寫高質(zhì)量的手機應用需要全職工作,為每個平臺重復做類似的事情需要大量的資源。應用程序能夠在Android和IOS設(shè)備上同時工作對我來說是一個巨大收獲。
更進一步,尤其是對于運行Android各種分支的設(shè)備,它們大小和形狀各異,想要讓你的應用程序在各種各樣屏幕分辨率的手機上看起來都不錯,這是真正的挑戰(zhàn)。對于要求嚴格的Android開發(fā)者來說,按照屏幕大小進行設(shè)屏幕分割(從完全最小化到最大進行縮放)會需要很多開發(fā)時間。由于瀏覽器會在每個設(shè)備上以相同的方式呈現(xiàn),關(guān)于這個方面你不必有任何擔心。