jQuerymobile移動(dòng)web(6)_jquery

　　1.touch 事件。

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

　　2.方向改變事件

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

　　3.滾動(dòng)事件，

　　　　scrollstart 開(kāi)始滾動(dòng)時(shí)候觸發(fā)該事件。
　　　　scrollend 滾動(dòng)結(jié)束時(shí)觸發(fā)該事件。

　　4.顯示/隱藏

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

　　　　示例代碼： 　　　　

　　5.模擬鼠標(biāo)事件

　　　　vmouseover 統(tǒng)一處理觸摸和鼠標(biāo)懸停事件。
　　　　vmousedown 統(tǒng)一處理觸摸和鼠標(biāo)按下事件。
　　　　vmousemove 統(tǒng)一處理觸摸和鼠標(biāo)移動(dòng)事件。
　　　　vmouseup 統(tǒng)一處理觸摸和鼠標(biāo)按鍵松開(kāi)事件。
　　　　vclick 統(tǒng)一處理觸摸和鼠標(biāo)點(diǎn)擊事件。
　　　　vmousecancel 統(tǒng)一處理觸摸和鼠標(biāo)l離開(kāi)事件。

頁(yè)面視圖輔助工具

　　1. $.mobile.changePage

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

　　　　語(yǔ)法： 　　　　　

　　　表單提交操作　　　

　　2.$.mobile.loaPage

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

　　示例：　　　

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

　　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ù)，指定需要移除哪個(gè)data屬性，如果不穿參數(shù)，則需要移除元素上的所有數(shù)據(jù)。

　　3.jqmHasData() 方法

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

地址路徑輔助工具：

　　1.解析URL 地址

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

　　　　parseUrl 函數(shù)的語(yǔ)法

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

loading 顯示/隱藏

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

JQuery Mobile 和 HTML5 的 3個(gè)優(yōu)點(diǎn)

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

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

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

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

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

3.支持跨平臺(tái)和跨設(shè)備開(kāi)發(fā)：一個(gè)巨大的好處是，我的應(yīng)用程序馬上可以在Android和IOS上工作，同樣也可以在其他平臺(tái)上工作。作為一個(gè)獨(dú)立開(kāi)發(fā)者，為不同的平臺(tái)維護(hù)基礎(chǔ)代碼是一項(xiàng)巨大的工作。為單個(gè)手機(jī)平臺(tái)編寫(xiě)高質(zhì)量的手機(jī)應(yīng)用需要全職工作，為每個(gè)平臺(tái)重復(fù)做類(lèi)似的事情需要大量的資源。應(yīng)用程序能夠在Android和IOS設(shè)備上同時(shí)工作對(duì)我來(lái)說(shuō)是一個(gè)巨大收獲。

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

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com