摘要

JQuery Mobile是針對智能手機(jī)和平板電腦創(chuàng)建的移動Web App開發(fā)框架，它的出現(xiàn)填補(bǔ)了JQuery在移動設(shè)備應(yīng)用上的缺憾，jQuery Mobile使用了極少的HTML5速警、CSS3、javaScript和Ajax腳本就可以完成頁面的渲染，秉承了jQuery“寫更少的代碼窃这，做更多的事情”理念：他可以通過一個靈活瞳别、簡單的方式來布局網(wǎng)頁，并且兼容所有的移動設(shè)備杭攻。

本文對JQuery Mobile各個知識點(diǎn)和使用方法做了簡要描述祟敛，并使用JQuery Mobile實(shí)現(xiàn)了一個簡單的Web App實(shí)例。

關(guān)鍵字：JQuery Mobile朴上。

文章組織結(jié)構(gòu)

一．JQuery Mobile簡介

二．JQuery Mobile基礎(chǔ)

三．JQuery Mobile使用實(shí)例

四．總結(jié)

一垒棋、JQuery Mobile簡介

今天，JQuery驅(qū)動著互聯(lián)網(wǎng)上的大量網(wǎng)站痪宰，在瀏覽器中提供動態(tài)的用戶體驗(yàn)叼架，這促使傳統(tǒng)的桌面應(yīng)用程序越來越少。現(xiàn)在衣撬，主流的移動平臺的瀏覽器功能都趕上了PC端桌面瀏覽器乖订，因此JQuery團(tuán)隊引入了JQuery Mobile。

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

JQuery Mobile有以下特性：

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

2陵究、JQuery Mobile使用起來很簡單眠饮，頁面開發(fā)主要使用標(biāo)記。

3铜邮、優(yōu)雅降級：這也是JQuery Mobile最吸引人的一個地方仪召，JQuery Mobile利用的是最新的HTML5和CSS3和JS寨蹋，但是并不是所有的移動設(shè)備都提供了這樣的支持。JQuery Mobile的哲學(xué)是同時支持高端和低端設(shè)備扔茅，只是在低端設(shè)備和是哪個顯示的效果會略差一些已旧。

4、主題系統(tǒng)召娜，JQuery Mobile提供了一套主題系統(tǒng)运褪，允許開發(fā)人員運(yùn)用自己的主題樣式。

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

二攀芯、JQuery Mobile基礎(chǔ)

1屯断、頁面結(jié)構(gòu)及頁面切換效果

JQuery Mobile中的一個頁面由header、content侣诺、footer三部分組成殖演，通過data-role=“page”定義一個頁面。這也就是說Query Mobile在一個頁面中可以添加多個頁面年鸳，這意味著瀏覽器只需要加載一個頁面趴久，就可以實(shí)現(xiàn)頁面平滑切換的用戶體驗(yàn)。

基本的JQuery Mobile Web App都應(yīng)當(dāng)遵循下面的基本模板：

在上面的基本頁面結(jié)構(gòu)中搔确，“header”彼棍、“content”、“footer”在頁面中通常的使用方式如下：

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

內(nèi)容（文本膳算、圖像座硕、按鈕、列表涕蜂、表單等）

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

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

slide

從右到左切換（默認(rèn)）

sildeup

從下到上切換

slidedown

從上到下切換

pop

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

fade

漸變褪色的方式切換

flip

舊頁面翻轉(zhuǎn)飛出，新頁面飛入

none

無過渡效果

flow

拋出當(dāng)前頁有鹿，進(jìn)入下一頁

sidefade

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

turn

轉(zhuǎn)向下一頁

2旭旭、文本

為了使用靈活，JQuery Mobile使普通HTML內(nèi)容更加獨(dú)立印颤，文本內(nèi)容的可讀性更強(qiáng)您机。

1)可折疊文本內(nèi)容：

2)格式化文本：

使用span標(biāo)簽添加class=“ui-li-count”，可在列表右側(cè)生成計數(shù)器。使用元素突出顯示內(nèi)容际看，

元素用于減弱列表項(xiàng)中顯示的內(nèi)容咸产，顯示補(bǔ)充信息可在

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

3)面板

JQuery Mobile的面板會在屏幕的左側(cè)向右劃出，用data-role=“panel”定義面板仲闽，用data-display=“push脑溢、overlay、reveal”來控制展示方式赖欣。關(guān)閉面板方式：data-dismissible=“true”屑彻，點(diǎn)擊外部區(qū)域關(guān)閉，data-swipe-close=“true”,通過滑動關(guān)閉顶吮。

3社牲、按鈕

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

按鈕時觸摸式應(yīng)用程序的重要部分搏恤，JQuery Mobile提供了以下默認(rèn)的按鈕樣式可供使用，當(dāng)然開發(fā)人員也可以根據(jù)自己的需求定義自己滿意的樣式湃交。

ui-corner-all

圓角

ui-shadow

陰影

ui-btn-inline

并排顯示

ui-btn-a

主題a按鈕樣式

ui-btn-b

主題b按鈕樣式

4熟空、列表

列表是JQuery Mobile比較突出的一個特性，JQuery Mobile使得標(biāo)準(zhǔn)的無序或有序列表在頁面中應(yīng)用得更加廣泛搞莺，使用方法是在ul或ol標(biāo)簽中添加屬性息罗。

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

1)簡單列表

2)超鏈接列表

3)嵌套列表

4)分割列表

5)過濾列表

6)氣泡列表

7)縮略圖、圖標(biāo)列表

5才沧、導(dǎo)航欄

導(dǎo)航欄是由一組水平排列的鏈接構(gòu)成迈喉，通常位于頁眉或頁腳內(nèi)部。JQuery Mobile的導(dǎo)航欄中的鏈接會自動轉(zhuǎn)換為按鈕温圆。

值得注意的是弊添，JQuery Mobile導(dǎo)航導(dǎo)航個數(shù)超過5個會自動按每行2個導(dǎo)航換行顯示，

6捌木、網(wǎng)格

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

JQuery Mobile中由五種網(wǎng)格布局可以使用：

ui-grid-solo

1列

對應(yīng)ui-block-a

ui-grid-a

2列

對應(yīng)ui-block-a|b

ui-grid-b

3列

對應(yīng)ui-block-a|b|c

ui-grid-c

4列

對應(yīng)ui-block-a|b|c|d

ui-grid-d

5列

對應(yīng)ui-block-a|b|c|d|e

7澈圈、對話框

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

8帆啃、表單

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

JQuery Mobile有很強(qiáng)的表單自適應(yīng)能力：ui-field-contain，寬屏幕左右顯示（480px以上）努潘，窄屏幕上下顯示（480以下）

表單中的單選和復(fù)選提供了橫向和豎向(默認(rèn))的兩種類型诽偷，只需設(shè)置data-type="horizontal"坤学。翻轉(zhuǎn)開關(guān)和滑動器以及下拉框還提供了mini版樣式只需設(shè)置data-mini="true"并且設(shè)置data-inline="true"。

9报慕、表格

JQuery Mobile提供了兩種模式的響應(yīng)式表格深浮。

1)回流表格模式(data-mode="reflow")：寬屏顯示普通表格列，窄屏?xí)兂杀韱问奖砀瘛?/p>

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

7布卡、主題

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

添加新主題：

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

8属拾、事件

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

事件分為五類：

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

pagebeforecreate

頁面創(chuàng)建前

pagecreate

當(dāng)頁面創(chuàng)建時

2) Page Load/Unload

pagebeforeload

當(dāng)外部頁面加載時

pagecontainerload

頁面成功載入并插入DOM后觸發(fā)

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

pagebeforeshow

過渡動畫開始前去的頁面觸發(fā)

pageshow

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

pagebeforehide

過渡動畫開始前來的頁面觸發(fā)

pagehide

過渡動畫完成后來的頁面觸發(fā)

4) page Change：

pagebeforechange

頁面切換前觸發(fā)的事件

pagechange

頁面切換時觸發(fā)的事件

pagechangefailed

頁面切換失敗觸發(fā)的事件

5)其他事件：

swiper

水平滑動

swipeleft

左滑動

swiperight

右滑動

tap

點(diǎn)擊

taphold

長按

scrollstart

頁面滾動開始觸發(fā)事件

scrollstop

頁面滾動結(jié)束觸發(fā)事件

orientationchange

屏幕方向改變時觸發(fā)

三尊浓、JQuery Mobile使用實(shí)例

上面簡單介紹了JQuery Mobile的基本用法，下面將以具體例子實(shí)現(xiàn)一個簡單Web App纯衍。示例是以調(diào)用restAPI的方式獲取Web端數(shù)據(jù)的一個云計算portal簡單Web App栋齿。

1、創(chuàng)建一個html網(wǎng)頁instance.html,導(dǎo)入jquery和jquery.mobile.依賴襟诸。并創(chuàng)建主頁面index和詳情頁面Detai基本結(jié)構(gòu)瓦堵。

2、為主頁面index添加主題選擇歌亲、按關(guān)鍵字查詢的搜索框菇用、導(dǎo)航欄以及ajax加載數(shù)據(jù)后顯示的列表。

3陷揪、detail頁面添加對虛機(jī)的詳情描述信息以及開關(guān)機(jī)等按鈕惋鸥。

4杂穷、綁定主題選擇事件

5、在頁面創(chuàng)建時加載數(shù)據(jù)

6卦绣、綁定搜索耐量，詳情按鈕、開關(guān)機(jī)按鈕事件

7迎卤、綁定事件搜索和開關(guān)機(jī)按鈕事件

7拴鸵、編寫ajax獲取個人實(shí)例數(shù)據(jù)

8、獲取detail信息

8蜗搔、獲取detail數(shù)據(jù)

9劲藐、開機(jī)

9、開機(jī)

10樟凄、關(guān)機(jī)

四．總結(jié)

隨著移動設(shè)備的普及聘芜，移動端設(shè)備越來越高端，移動端的瀏覽器也越來越接近甚至超越PC端瀏覽器的性能缝龄，Web App也隨著興起汰现，相較于原生App來說Web App使用W3C標(biāo)準(zhǔn)的HTML語言開發(fā)，能夠輕松的實(shí)現(xiàn)跨平臺叔壤，移動應(yīng)用開發(fā)者不再需要考慮復(fù)雜的底層適配和跨平臺開發(fā)語言的問題瞎饲，原生App能實(shí)現(xiàn)的一些特殊功能如：本地數(shù)據(jù)存儲、音頻播放炼绘、調(diào)用照相機(jī)等現(xiàn)在Web App也同樣可以實(shí)現(xiàn)嗅战。在開發(fā)時間方面Web App的迭代周期要遠(yuǎn)遠(yuǎn)短于原生App，并且用戶不需要頻繁的重新下載或升級俺亮。從用戶體驗(yàn)方面來說Web App既有Web的特性同時又有原生App的特性驮捍，Web App與傳統(tǒng)互聯(lián)網(wǎng)是互聯(lián)的，從一個Web App可以直接跳轉(zhuǎn)到另一個Web App脚曾。

JQuery Mobile便是為主流的移動平臺提供的一個JQuery核心類庫东且，同JQuery一樣，JQuery Mobile是一個免費(fèi)開源的項(xiàng)目本讥，受到越來越多的開發(fā)人員的關(guān)注珊泳，它有著豐富的界面樣式、強(qiáng)大的自適應(yīng)能力拷沸、各種移動設(shè)備上可觸發(fā)的事件旨椒，并且JQuery Mobile同時可支持高端和低端設(shè)備。

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

個人簡介：

劉小兵

軟件開發(fā)工程師

任職于某大型IT外資企業(yè)，主要從事JavaEE開發(fā)勤庐。