jQuery mobile 移動web(6)
jquery mobile 針對移動端設(shè)備的事件類型。
1.touch 事件。
tap 快速觸摸屏幕并且離開,類似一種完整的點擊操作。
taphold 觸摸屏幕并保持一段時間。
swipe 在1秒內(nèi)水平移動30px屏幕像素上時觸發(fā)。
swipeleft 向左側(cè)滑動
swiperight 像右側(cè)滑動。
2.方向改變事件
orientationchange 事件函數(shù)當(dāng)移動設(shè)備的方向發(fā)生改變觸發(fā),在事件的回調(diào)函數(shù)內(nèi)的第二個參數(shù)返回一個用于識別當(dāng)前方向的參數(shù),
該參數(shù)有兩種返回值:portrait(縱向)landscarp(橫向)。
3.滾動事件,
scrollstart 開始滾動時候觸發(fā)該事件。
scrollend 滾動結(jié)束時觸發(fā)該事件。
4.顯示/隱藏
pagebeforeshow 當(dāng)視圖通過動畫效果開始顯示在屏幕之前觸發(fā)事件。
pagebeforehide 當(dāng)視圖通過動畫效果開始隱藏之前觸發(fā)事件,
pageshow 當(dāng)視圖通過動畫效果顯示在屏幕之后觸發(fā)事件。
pagehide 當(dāng)視圖通過動畫效果隱藏后觸發(fā)。
示例代碼:
$("div").live("pageshow",function(event,ui){
alert("this page just hidden"+ui.prevPage)
})
5.模擬鼠標(biāo)事件
vmouseover 統(tǒng)一處理觸摸和鼠標(biāo)懸停事件。
vmousedown 統(tǒng)一處理觸摸和鼠標(biāo)按下事件。
vmousemove 統(tǒng)一處理觸摸和鼠標(biāo)移動事件。
vmouseup 統(tǒng)一處理觸摸和鼠標(biāo)按鍵松開事件。
vclick 統(tǒng)一處理觸摸和鼠標(biāo)點擊事件。
vmousecancel 統(tǒng)一處理觸摸和鼠標(biāo)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
主要的作用是加載外部頁面,并插入當(dāng)前頁面的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ù)是一個進(jìn)行數(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)容,相當(dāng)于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)。在本文中,原生應(yīng)用指直接用系統(tǒng)提供的API開發(fā)的程序,與JQuery Mobile開發(fā)的程序相對應(yīng)。
我發(fā)現(xiàn)Apple的Builder接口的學(xué)習(xí)曲線十分陡峭,同樣學(xué)習(xí)令人費解的Android布局系統(tǒng)也很耗時間。此外,要使用原生代碼將一個list view連接到遠(yuǎn)程的數(shù)據(jù)源并具有漂亮的外觀是十分復(fù)雜的(在Android上是ListView, 在iOS上是UITableView)我能夠通過已經(jīng)掌握的JavaScript和HTML/CSS知識快速地實現(xiàn)同樣的功能,無需學(xué)習(xí)新的adapter,delegate等等抽象概念,只要編寫JQuery代碼就可以做到。
2.避免麻煩的應(yīng)用商店審批過程以及調(diào)試、構(gòu)建帶來的痛苦:為手機開發(fā)應(yīng)用,尤其是iOS系統(tǒng)的手機,最痛苦的過程莫過于通過Apple應(yīng)用商店的審批。想要讓一個原生應(yīng)用程序發(fā)布給iOS用戶,你需要等待一個相當(dāng)長的過程(需要好幾天,甚至可能是好幾周)。不僅在第一次發(fā)布程序時要經(jīng)歷磨難,以后的每一次升級也是如此。這使得QA和發(fā)布流程變得復(fù)雜,還會增加額外的時間。由于JQuery Mobile應(yīng)用程序僅僅是一種web應(yīng)用程序,因此它繼承了所有web環(huán)境的優(yōu)點:當(dāng)用戶加載你的網(wǎng)站時,他們就馬上“升級”到最新的版本。可以馬上修復(fù)bug和添加新的特性。即使是在Android系統(tǒng)——應(yīng)用市場的要求比起Apple環(huán)境要寬松得多,在用戶不知不覺中完成產(chǎn)品升級也是一件很好的事情。
進(jìn)一步的好處是,發(fā)布beta或測試版本會更加容易。只要告訴用戶用瀏覽器打開你的網(wǎng)址就可以了!不需要考慮iOS令人抓狂的DRM,也不需要理會Android必須的APK。
3.支持跨平臺和跨設(shè)備開發(fā):一個巨大的好處是,我的應(yīng)用程序馬上可以在Android和IOS上工作,同樣也可以在其他平臺上工作。作為一個獨立開發(fā)者,為不同的平臺維護(hù)基礎(chǔ)代碼是一項巨大的工作。為單個手機平臺編寫高質(zhì)量的手機應(yīng)用需要全職工作,為每個平臺重復(fù)做類似的事情需要大量的資源。應(yīng)用程序能夠在Android和IOS設(shè)備上同時工作對我來說是一個巨大收獲。
更進(jìn)一步,尤其是對于運行Android各種分支的設(shè)備,它們大小和形狀各異,想要讓你的應(yīng)用程序在各種各樣屏幕分辨率的手機上看起來都不錯,這是真正的挑戰(zhàn)。對于要求嚴(yán)格的Android開發(fā)者來說,按照屏幕大小進(jìn)行設(shè)屏幕分割(從完全最小化到最大進(jìn)行縮放)會需要很多開發(fā)時間。由于瀏覽器會在每個設(shè)備上以相同的方式呈現(xiàn),關(guān)于這個方面你不必有任何擔(dān)心。
相關(guān)文章
jQuery Datatable 多個查詢條件自定義提交事件(推薦)
這篇文章主要介紹了jQuery Datatable 多個查詢條件自定義提交事件的相關(guān)資料,需要的朋友可以參考下2017-08-08
如何使用jquery修改css中帶有!important的樣式屬性
如何使用jquery修改css中帶有!important的樣式屬性?下面小編就為大家?guī)硪黄褂胘query修改css中帶有!important的樣式屬性方法。希望對大家有所幫助。一起跟隨小編過來看看吧2016-04-04
Jquery實現(xiàn)點擊切換圖片并隱藏顯示內(nèi)容(2種方法實現(xiàn))
電腦屏幕大小是固定的,那么如何在有限的空間放更多的內(nèi)容呢,jquery的tab切換式瀏覽卻可以解決這個問題2013-04-04
Jqyery中同等與js中windows.onload的應(yīng)用
我們知道,在javascript中用來執(zhí)行頁面加載中的操作時候,我們會使用windows.onload=function(){}或者windows.onload=函數(shù)名(),也可以在body中調(diào)用onload事件調(diào)用方法即可,在jQuery中也有相當(dāng)?shù)拇a2011-05-05
深入理解Jquery表單驗證(使用formValidator)
表單驗證在web中中的應(yīng)用很廣,本篇文章主要介紹了Jquery表單驗證(使用formValidator),非常具有實用價值,需要的朋友可以參考下。2017-01-01

