-
jQuery Mobile
鎖定
- 中文名
- jQuery Mobile
- 平 台
- 移動端
- 用 途
- 給主流移動平台帶來jQuery核心庫
- 特 點
- 促使傳統桌面應用程序越來越少
jQuery Mobile簡單介紹
jQuery 驅動着 Internet 上的大量網站,在瀏覽器中提供動態用户體驗,促使傳統桌面應用程序越來越少。主流移動平台上的瀏覽器功能都趕上了桌面瀏覽器,因此 jQuery 團隊引入了 jQuery Mobile(或 JQM)。JQM 的使命是向所有主流移動瀏覽器提供一種統一體驗,使整個 Internet 上的內容更加豐富 — 不管使用哪種查看設備。
JQM 的目標是在一個統一的 UI 中交付超級 JavaScript 功能,跨最流行的智能手機和平板電腦設備工作。與 jQuery 一樣,JQM 是一個在 Internet 上直接託管、免費可用的開源代碼基礎。事實上,當 JQM 致力於統一和優化這個代碼基時,jQuery 核心庫受到了極大關注。這種關注充分説明,移動瀏覽器技術在極短的時間內取得了多麼大的發展。
與 jQuery 核心庫一樣,您的開發計算機上不需要安裝任何東西;只需將各種 *.js 和 *.css 文件直接包含到您的 web 頁面中即可。這樣,JQM 的功能就好像被放到了您的指尖,供您隨時使用。
jQuery Mobile基本特性
一般簡單性
此框架簡單易用。頁面開發主要使用標記,無需或僅需很少 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,還包括一些圖標。
主題設置
jQuery Mobile瀏覽器介紹
我們在移動設備瀏覽器支持方面取得了長足的進步,但並非所有移動設備都支持 HTML5、CSS 3 和 JavaScript。這個領域是 jQuery Mobile 的持續增強和優雅降級支持發揮作用的地方。如前所述,jQuery Mobile 同時支持高端和低端設備,比如那些沒有 JavaScript 支持的設備 。持續增強(Progressive Enhancement)包含以下核心原則:
所有瀏覽器都應該能夠訪問全部基礎內容。
所有瀏覽器都應該能夠訪問全部基礎功能。
增強的佈局由外部鏈接的 CSS 提供。
增強的行為由外部鏈接的 JavaScript 提供。
終端用户瀏覽器偏好應受到尊重。
所有基本內容應該(按照設計)在基礎設備上進行渲染,而更高級的平台和瀏覽器將使用額外的、外部鏈接的 JavaScript 和 CSS 持續增強。
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
| 當用户停止滾動頁面時觸發。
|
當用户在元素上水平滑動時觸發。
| |
swipeleft
| 當用户從左劃過元素超過 30px 時觸發。
|
swiperight
| 當用户從右劃過元素超過 30px 時觸發。
|
當用户敲擊某元素時觸發。
| |
taphold
| 當元素敲擊某元素並保持一秒時觸發。
|
throttledresize
| 啓用可標記 #hash 歷史記錄
|
updatelayout
| 由動態顯示/隱藏內容的 jQuery Mobile 組件觸發。
|
vclick
| 虛擬化的 click 事件處理器
|
vmousecancel
| 虛擬化的 mousecancel 事件處理器
|
vmousedown
| 虛擬化的 mousedown 事件處理器
|
vmousemove
| 虛擬化的 mousemove 事件處理器
|
vmouseout
| 虛擬化的 mouseout 事件處理器
|
vmouseover
| 虛擬化的 mouseover 事件處理器
|
vmouseup
| 虛擬化的 mouseup 事件處理器
|
- 參考資料
-
- 1. jQuery Mobile框架 .jQuery Mobile官網[引用日期2017-10-25]
- 2. jQuery Mobile主題 .W3Cschool[引用日期2017-10-25]
- 3. jQuery Mobile 教程 .W3Cschool 菜鳥教程[引用日期2014-01-21]