jQuery Mobile 總結

轉載  孟祥月 博客

http://blog.cshttp://blog.csdn.net/mengxiangyue/article/category/1313478/2dn.http://blog.csdn.net/mengxiangyue/article/category/1313478/2net/mengxiangyue/article/category/1313478/2

 

data-role參數表：

page        頁面容器，其內部的mobile元素將會繼承這個容器上所設置的屬性 

header     頁面標題容器，這個容器內部能夠包含文字、返回按鈕、功能按鈕等元素

footer       頁面頁腳容器，這個容器內部也能夠包含文字、返回按鈕、功能按鈕等元素

content     頁面內容容器，這是一個很寬容的容器，內部能夠包含標準的html元素和jQueryMobile元素

controlgroup     將幾個元素設置成一組，通常是幾個相同的元素類型

fieldcontain       區域包裹容器，用增長邊距和分割線的方式將容器內的元素和容器外的元素明顯分隔

navbar     功能導航容器，通俗的講就是工具條

listview     列表展現容器，相似手機中聯繫人列表的展現方式

list-divider      列表展現容器的表頭，用來展現一組列表的標題，內部不可包含連接

button      按鈕，將連接和普通按鈕的樣式設置成爲jQueryMobile的風格

none        阻止框架對元素進行渲染，使元素以html原生的狀態顯示，主要用於form元素。

data-transition參數表：

slide    從右側向左滑入頁面

slideup    從底部向上滑入

slidedown      從上向下滑入

pop     從中心漸顯展開

fade     漸顯

flip       翻轉

 

data-icon參數表：

 

data-iconpos參數表：

right    圖標在文字的右側

top    圖標在文字上面

bottom      圖標在文字下面

pop     從中心漸顯展開

fade     漸顯

flip       翻轉

 

jQuery Mobile 

jQuery Mobile是jQuery 在手機上和平板設備上的版本。jQuery Mobile 不只會給主流移動平臺帶來jQuery核心庫，並且會發佈一個完整統一的jQuery移動UI框架。支持全球主流的移動平臺。jQuery Mobile開發團隊說:能開發這個項目，咱們很是興奮。移動Web太須要一個跨瀏覽器的框架，讓開發人員開發出真正的移動Web網站。

 

 

簡單介紹

今天，jQuery 驅動着 Internet 上的大量網站，在瀏覽器中提供動態用戶體驗，促使傳統桌面應用程序愈來愈少。如今，主流移動平臺上的瀏覽器功能都遇上了桌面瀏覽器，所以 jQuery 團隊引入了 jQuery Mobile(或 JQM)。JQM 的使命是向全部主流移動瀏覽器提供一種統一體驗，使整個 Internet 上的內容更加豐富 - 無論使用哪一種查看設備。

JQM 的目標是在一個統一的 UI 中交付超級 JavaScript 功能，跨最流行的智能手機和平板電腦設備工做。與 jQuery 同樣，JQM 是一個在 Internet 上直接託管、免費可用的開源代碼基礎。事實上，當 JQM 致力於統一和優化這個代碼基時，jQuery 核心庫受到了極大關注。這種關注充分說明，移動瀏覽器技術在極短的時間內取得了多麼大的發展。

與 jQuery 核心庫同樣，您的開發計算機上不須要安裝任何東西;只需將各類 *.js 和 *.css 文件直接包含到您的 web 頁面中便可。這樣，JQM 的功能就好像被放到了您的指尖，供您隨時使用。

 

 

基本特性

通常簡單性

此框架簡單易用。頁面開發主要使用標記，無需或僅需不多 JavaScript。

摺疊優雅降級

儘管 jQuery Mobile 利用最新的 HTML五、CSS3 和 JavaScript，但並不是全部移動設備都提供這樣的支持。jQuery Mobile 的哲學是同時支持高端和低端設備，好比那些沒有 JavaScript 支持的設備，儘可能提供最好的體驗。

摺疊Accessibility

jQuery Mobile 在設計時考慮了訪問能力，它擁有 Accessible Rich Internet Applications (WAI-ARIA) 支持，以幫助使用輔助技術的殘障人士訪問 web 頁面。

摺疊小規模

jQuery Mobile 框架的總體大小比較小，JavaScript 庫 12KB，CSS 6KB，還包括一些圖標。

摺疊主題設置

此框架還提供一個主題系統，容許您提供本身的應用程序樣式。

瀏覽器

咱們在移動設備瀏覽器支持方面取得了長足的進步，但並不是全部移動設備都支持 HTML五、CSS 3 和 JavaScript。這個領域是 jQuery Mobile 的持續加強和優雅降級支持發揮做用的地方。如前所述，jQuery Mobile 同時支持高端和低端設備，好比那些沒有 JavaScript 支持的設備 。持續加強(Progressive Enhancement)包含如下核心原則:

全部瀏覽器都應該可以訪問所有基礎內容。

全部瀏覽器都應該可以訪問所有基礎功能。

加強的佈局由外部連接的 CSS 提供。

加強的行爲由外部連接的 JavaScript 提供。

終端用戶瀏覽器偏好應受到尊重。

全部基本內容應該(按照設計)在基礎設備上進行渲染，而更高級的平臺和瀏覽器將使用額外的、外部連接的 JavaScript 和 CSS 持續加強。

jQuery Mobile 目前支持如下移動平臺: 教程

Apple iOS:iPhone、iPod Touch、iPad(全部版本)

Android:全部設備(全部版本)

Blackberry Torch(版本 6)

Palm WebOS Pre、Pixi

Nokia N900(進程中)

 

 

事件

jQuery Mobile 也提供了針對移動端瀏覽器的事件:

下面的表格列出了全部 jQuery Mobile 事件。

注意:請使用 on() 方法綁定事件。

事件	描述
hashchange	啓用可標記 #hash 歷史，哈希值會在一次獨立的點擊時發生時變化，好比一個用戶點擊後退按鈕，會經過 hashchange事件進行處理。
navigate	包裹了 hashchange 和 popstate 的事件
orientationchange	方向改變事件,在用戶垂直或者水平旋轉移動設備時觸發。
pagebeforechange	在頁面切換以前，觸發的事件。使用$.mobile.changePage()來切換頁面，此方法觸發2個事件，切換以前的pagebeforechange事件，和切換完成後pagechange(成功)或者pagechangefailed(失敗)。
pagebeforecreate	頁面初始化時，初始化以前觸發。
pagebeforehide	在頁面切換後舊頁面隱藏以前，觸發的事件。
pagebeforeload	在加載請求發出以前觸發
pagebeforeshow	在頁面切換後顯示以前，觸發的事件。
pagechange	在頁面切換成功後，觸發的事件。使用$.mobile.changePage()來切換頁面，此方法觸發2個事件，切換以前的pagebeforechange事件，和切換完成後pagechange(成功)或者pagechangefailed(失敗)。
pagechangefailed	在頁面切換失敗時，觸發的事件。使用$.mobile.changePage()來切換頁面，此方法觸發2個事件，切換以前的pagebeforechange事件，和切換完成後pagechange(成功)或者pagechangefailed(失敗)。
pagecreate	在頁面建立成功以後，觸發的事件,但加強完成以前。
pagehide	在頁面切換後老頁面隱藏以後，觸發的事件。
pageinit	在頁面頁面初始化時，觸發的事件。
pageload	在頁面徹底加載成功後觸發。
pageloadfailed	若是頁面請求失敗觸發。
pageremove	在窗口視圖從 DOM 中移除外部頁面以前觸發。
pageshow	在過渡動畫完成後，在"到達"頁面觸發。
scrollstart	當用戶開始滾動頁面時觸發。
scrollstop	當用戶中止滾動頁面時觸發。
swipe	當用戶在元素上水平滑動時觸發。
swipeleft	當用戶從左劃過元素超過 30px 時觸發。
swiperight	當用戶從右劃過元素超過 30px 時觸發。
tap	當用戶敲擊某元素時觸發。
taphold	當元素敲擊某元素並保持一秒時觸發。
throttledresize	啓用可標記 #hash 歷史記錄
updatelayout	由動態顯示/隱藏內容的 jQuery Mobile 組件觸發。
vclick	虛擬化的 click 事件處理器
vmousecancel	虛擬化的 mousecancel 事件處理器
vmousedown	虛擬化的 mousedown 事件處理器
vmousemove	虛擬化的 mousemove 事件處理器
vmouseout	虛擬化的 mouseout 事件處理器
vmouseover	虛擬化的 mouseover 事件處理器
vmouseup	虛擬化的 mouseup 事件處理器

收起