摘要

JQuery Mobile是針對智能手機和平板電腦創建的移動Web App開發框架，它的出現填補了JQuery在移動設備應用上的缺憾，jQuery Mobile使用了極少的HTML5、CSS3、javaScript和Ajax腳本就可以完成頁面的渲染，秉承了jQuery“寫更少的代碼，做更多的事情”理念：他可以通過一個靈活、簡單的方式來布局網頁，并且兼容所有的移動設備。

本文對JQuery Mobile各個知識點和使用方法做了簡要描述，并使用JQuery Mobile實現了一個簡單的Web App實例。

關鍵字：JQuery Mobile。

文章組織結構

一．JQuery Mobile簡介

二．JQuery Mobile基礎

三．JQuery Mobile使用實例

四．總結

一、JQuery Mobile簡介

今天，JQuery驅動著互聯網上的大量網站，在瀏覽器中提供動態的用戶體驗，這促使傳統的桌面應用程序越來越少。現在，主流的移動平臺的瀏覽器功能都趕上了PC端桌面瀏覽器，因此JQuery團隊引入了JQuery Mobile。

與JQuery核心庫一樣，您的開發基本上不需要安裝任何的東西；只需要將JQuery Mobile依賴的*.js和*.css文件直接包含到web頁面中即可。

JQuery Mobile有以下特性：

1、JQuery Mobile基本框架整體比較小，js和css總共只有30k左右。

2、JQuery Mobile使用起來很簡單，頁面開發主要使用標記。

3、優雅降級：這也是JQuery Mobile最吸引人的一個地方，JQuery Mobile利用的是最新的HTML5和CSS3和JS，但是并不是所有的移動設備都提供了這樣的支持。JQuery Mobile的哲學是同時支持高端和低端設備，只是在低端設備和是哪個顯示的效果會略差一些。

4、主題系統，JQuery Mobile提供了一套主題系統，允許開發人員運用自己的主題樣式。

5、無障礙，JQuery Mobile在綜合考慮了Web App訪問者的訪問能力，提供了WAI-ARIA支持，以支持殘障人士使用輔助技術訪問web頁面。

二、JQuery Mobile基礎

1、頁面結構及頁面切換效果

JQuery Mobile中的一個頁面由header、content、footer三部分組成，通過data-role=“page”定義一個頁面。這也就是說Query Mobile在一個頁面中可以添加多個頁面，這意味著瀏覽器只需要加載一個頁面，就可以實現頁面平滑切換的用戶體驗。

基本的JQuery Mobile Web App都應當遵循下面的基本模板：

在上面的基本頁面結構中，“header”、“content”、“footer”在頁面中通常的使用方式如下：

用于放置標題和按鈕（典型的就是放置一個“返回”按鈕）

內容（文本、圖像、按鈕、列表、表單等）

頁面底部建立工具欄，添加一些功能按鈕。

JQuery Mobile中可以使用多種不同的切換效果來顯示新頁面的內容，只需要在超鏈接里添加data-transition屬性即可。目前JQuery Mobile支持的頁面切換效果有以下幾種：

slide

從右到左切換（默認）

sildeup

從下到上切換

slidedown

從上到下切換

pop

已彈出的形式打開一個頁面

fade

漸變褪色的方式切換

flip

舊頁面翻轉飛出，新頁面飛入

none

無過渡效果

flow

拋出當前頁，進入下一頁

sidefade

從右向左滑動并淡入到下一頁

turn

轉向下一頁

2、文本

為了使用靈活，JQuery Mobile使普通HTML內容更加獨立，文本內容的可讀性更強。

1)可折疊文本內容：

2)格式化文本：

使用span標簽添加class=“ui-li-count”，可在列表右側生成計數器。使用元素突出顯示內容，

元素用于減弱列表項中顯示的內容，顯示補充信息可在

元素中添加class="ui-li-aside"

3)面板

JQuery Mobile的面板會在屏幕的左側向右劃出，用data-role=“panel”定義面板，用data-display=“push、overlay、reveal”來控制展示方式。關閉面板方式：data-dismissible=“true”，點擊外部區域關閉，data-swipe-close=“true”,通過滑動關閉。

3、按鈕

JQuery Mobile中通過給a、button或者input元素添加樣式（或者增加data-role=”button”）,便可以創建按鈕。

按鈕時觸摸式應用程序的重要部分，JQuery Mobile提供了以下默認的按鈕樣式可供使用，當然開發人員也可以根據自己的需求定義自己滿意的樣式。

ui-corner-all

圓角

ui-shadow

陰影

ui-btn-inline

并排顯示

ui-btn-a

主題a按鈕樣式

ui-btn-b

主題b按鈕樣式

4、列表

列表是JQuery Mobile比較突出的一個特性，JQuery Mobile使得標準的無序或有序列表在頁面中應用得更加廣泛，使用方法是在ul或ol標簽中添加屬性。

JQuery Mobile中的列表可分為如下幾類：

1)簡單列表

2)超鏈接列表

3)嵌套列表

4)分割列表

5)過濾列表

6)氣泡列表

7)縮略圖、圖標列表

5、導航欄

導航欄是由一組水平排列的鏈接構成，通常位于頁眉或頁腳內部。JQuery Mobile的導航欄中的鏈接會自動轉換為按鈕。

值得注意的是，JQuery Mobile導航導航個數超過5個會自動按每行2個導航換行顯示，

6、網格

JQuery Mobile提供了一套基于CSS的分列布局，但是由于移動設備上特別是手機屏幕寬度狹窄，所以一般不建議使用。

JQuery Mobile中由五種網格布局可以使用：

ui-grid-solo

1列

對應ui-block-a

ui-grid-a

2列

對應ui-block-a|b

ui-grid-b

3列

對應ui-block-a|b|c

ui-grid-c

4列

對應ui-block-a|b|c|d

ui-grid-d

5列

對應ui-block-a|b|c|d|e

7、對話框

上面JQuery Mobile中通過為a標簽添加data-rel=”dialog”或者data-dialog=”true”屬性便可以將連接頁面以彈出框的形式展示。

8、表單

JQuery Mobile使用表單是直接按原生的方法使用即可。

JQuery Mobile有很強的表單自適應能力：ui-field-contain，寬屏幕左右顯示（480px以上），窄屏幕上下顯示（480以下）

表單中的單選和復選提供了橫向和豎向(默認)的兩種類型，只需設置data-type="horizontal"。翻轉開關和滑動器以及下拉框還提供了mini版樣式只需設置data-mini="true"并且設置data-inline="true"。

9、表格

JQuery Mobile提供了兩種模式的響應式表格。

1)回流表格模式(data-mode="reflow")：寬屏顯示普通表格列，窄屏會變成表單式表格。

2)列切換模式（data-mode="columntoggle"）：列切換模式會在寬度不夠時隱藏數據，添加data-priority=“1”屬性來設置隱藏列的順序，按優先級1(最高)-6(最低)，從低到高隱藏。

7、主題

JQuery Mobile提供了2種不同的主題樣式，從“a”到“b”-每一種主題的按鈕，工具條，內容塊等等顏色都不一樣，沒個主題的視覺效果也不一樣。其中a主題是灰色背景黑色文字，b主題為黑背景白色文字，通過data-theme屬性可以自定義主題：按鈕

添加新主題：

通過修改CSS文件來添加或編輯新主題，只需要拷貝樣式模板，然后重命名字母類名（c-z），并在樣式中添加你需要的顏色和字體即可。同時也可以為主題添加新樣式，如按鈕添加類：ui-btn-(a-z).頁面添加ui-page-theme-(a-z).

8、事件

JQuery Mobile中的事件必須使用on()方法來綁定。

事件分為五類：

1) Page Initialization（頁面初始化事件，這些事件只在頁面加載時執行一次）

pagebeforecreate

頁面創建前

pagecreate

當頁面創建時

2) Page Load/Unload

pagebeforeload

當外部頁面加載時

pagecontainerload

頁面成功載入并插入DOM后觸發

3) page Transition：在頁面過度之前和之后（每次都會觸發），

pagebeforeshow

過渡動畫開始前去的頁面觸發

pageshow

去的頁面一開始加載/過渡動畫完成之后

pagebeforehide

過渡動畫開始前來的頁面觸發

pagehide

過渡動畫完成后來的頁面觸發

4) page Change：

pagebeforechange

頁面切換前觸發的事件

pagechange

頁面切換時觸發的事件

pagechangefailed

頁面切換失敗觸發的事件

5)其他事件：

swiper

水平滑動

swipeleft

左滑動

swiperight

右滑動

tap

點擊

taphold

長按

scrollstart

頁面滾動開始觸發事件

scrollstop

頁面滾動結束觸發事件

orientationchange

屏幕方向改變時觸發

三、JQuery Mobile使用實例

上面簡單介紹了JQuery Mobile的基本用法，下面將以具體例子實現一個簡單Web App。示例是以調用restAPI的方式獲取Web端數據的一個云計算portal簡單Web App。

1、創建一個html網頁instance.html,導入jquery和jquery.mobile.依賴。并創建主頁面index和詳情頁面Detai基本結構。

2、為主頁面index添加主題選擇、按關鍵字查詢的搜索框、導航欄以及ajax加載數據后顯示的列表。

3、detail頁面添加對虛機的詳情描述信息以及開關機等按鈕。

4、綁定主題選擇事件

5、在頁面創建時加載數據

6、綁定搜索，詳情按鈕、開關機按鈕事件

7、綁定事件搜索和開關機按鈕事件

7、編寫ajax獲取個人實例數據

8、獲取detail信息

8、獲取detail數據

9、開機

9、開機

10、關機

四．總結

隨著移動設備的普及，移動端設備越來越高端，移動端的瀏覽器也越來越接近甚至超越PC端瀏覽器的性能，Web App也隨著興起，相較于原生App來說Web App使用W3C標準的HTML語言開發，能夠輕松的實現跨平臺，移動應用開發者不再需要考慮復雜的底層適配和跨平臺開發語言的問題，原生App能實現的一些特殊功能如：本地數據存儲、音頻播放、調用照相機等現在Web App也同樣可以實現。在開發時間方面Web App的迭代周期要遠遠短于原生App，并且用戶不需要頻繁的重新下載或升級。從用戶體驗方面來說Web App既有Web的特性同時又有原生App的特性，Web App與傳統互聯網是互聯的，從一個Web App可以直接跳轉到另一個Web App。

JQuery Mobile便是為主流的移動平臺提供的一個JQuery核心類庫，同JQuery一樣，JQuery Mobile是一個免費開源的項目，受到越來越多的開發人員的關注，它有著豐富的界面樣式、強大的自適應能力、各種移動設備上可觸發的事件，并且JQuery Mobile同時可支持高端和低端設備。

本文通過對JQuery Mobile的各個知識點的具體使用分析并且提供了一個完整的案例。相信對于即將使用JQuery Mobile開發Web App的開發人員有一定的幫助。

個人簡介：

劉小兵

軟件開發工程師

任職于某大型IT外資企業，主要從事JavaEE開發。