jQuery Mobile

jQuery Mobile

jQuery Mobile是jQuery 框架的一個組件(而非jquery的移動版本)。jQuery Mobile是一款基於HTML5的用戶界面系統,旨在使所有智慧型手機,平板電腦和桌面設備上都可以訪問的回響網站和套用。 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 利用最新的 HTML5、CSS3 和 JavaScript,但並非所有移動設備都提供這樣的支持。jQuery Mobile 的哲學是同時支持高端和低端設備,比如那些沒有 JavaScript 支持的設備,儘量提供最好的體驗。

Accessibility

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

小規模

jQuery Mobile 框架的整體大小比較小,JavaScript 庫 12KB,CSS 6KB,還包括一些圖示。

主題設定

此框架還提供一個主題系統,允許您提供自己的應用程式樣式。

瀏覽器介紹

我們在移動設備瀏覽器支持方面取得了長足的進步,但並非所有移動設備都支持 HTML5、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系列、Veer、TouchPad

Nokia N900(進程中)

Windows Phone 8/8.1/10預覽版

事件

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 事件處理器

相關詞條

熱門詞條