jQuery mobile 移動web(6)

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

　　1.touch 事件。

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

　　2.方向改變事件

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

　　3.滾動事件，

　　　　scrollstart 開始滾動時候觸發該事件。
　　　　scrollend 滾動結束時觸發該事件。

　　4.顯示/隱藏

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

　　　　示例代碼：　　　　

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

　　5.模擬鼠標事件

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

頁面視圖輔助工具

　　1. $.mobile.changePage

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

　　　　語法： 　　　　　

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

　　　表單提交操作　　　

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

　　2.$.mobile.loaPage

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

　　示例：　　　

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

數據存儲：

　　1.jqmData()方法;

　　　　可以在元素上綁定任意數據。

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

　　2.jqmRemoveData() 方法：

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

　　3.jqmHasData() 方法

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

地址路徑輔助工具：

　　1.解析URL 地址

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

　　　　parseUrl 函數的語法

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

loading 顯示/隱藏

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

JQuery Mobile 和 HTML5 的 3個優點

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

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

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

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

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

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

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