jQuery Mobile入門學(xué)習(xí)教程是本文要介紹的內(nèi)容，主要是來了解jQuery Mobile的使用方法，文中很詳解的講解了jQuery Mobile學(xué)習(xí)教程。

Android，黑莓還是iphone？為了讓你清楚意識到究竟哪些才算是智能手機，我在下面總結(jié)了一個智能手機系統(tǒng)/設(shè)備的列表：

AppleiPhone/iPodTouch  
GoogleAndroid  
RIMBlackBerry/PlaybookOS 

NokiaSymbian(我承認(rèn)它該退休了，可是在世界范圍內(nèi)它仍然擁有10億以上的用戶）

HP/PalmWebOS  
MicrosoftWindowPhone7 

沒錯，這令人眼花繚亂的眾多智能手機系統(tǒng)對HTML標(biāo)準(zhǔn)支離破碎的支持，直接導(dǎo)致了處理這些系統(tǒng)瀏覽器的兼容性成為了你最大的挑戰(zhàn)。舉例來說，蘋果的iphone對HTML5標(biāo)準(zhǔn)有著很好的支持，然而Symbian和MicrosoftPhone系列卻幾乎不支持HTML5的任何特性（譯注：準(zhǔn)確的說，是windowsmobile系列，目前的windowsphone7對HTML5支持很好）。jQuery社區(qū)為了在解決兼容性和高效創(chuàng)建移動web站點做了大量努力，并開發(fā)了jQuery Mobile這個移動框架。而本文旨在為讀者介紹仍在alpha版本階段的jQuery Mobile框架（譯注：目前jQuery Mobile已經(jīng)為beta2版本）的開發(fā)基礎(chǔ)知識和技巧。

用jQuery Mobile來開發(fā)網(wǎng)站

Gartnerstudy(link)的數(shù)據(jù)表明在未來將會有越來越多的用戶通過手機或者平板電腦訪問你的網(wǎng)站，到2013年，將會有18億的移動設(shè)備用戶，對你的web設(shè)計團隊來說開發(fā)移動站點已經(jīng)不能再僅僅是“計劃”而已了，你必須將你的移動站點迅速變?yōu)?ldquo;現(xiàn)實”才行。

在美國，IOS和Android設(shè)備占了很大比重，而美國以外的地方主要是Nokia的設(shè)備占統(tǒng)治地位。jQuery Mobile為了在盡可能多的設(shè)備上運行，承諾將支持絕大部分移動設(shè)備/系統(tǒng)。在早些時候（2010年9月），jQuery的作者JohnResig透露了一張jQuery Mobile對各種設(shè)備/系統(tǒng)的支持表格（見下）。對于每個系統(tǒng)來說，jQuery Mobile將他們的支持情況分為A（好），B（一般），C（基本）三個等級。

由于移動設(shè)備市場的變幻莫測，這張圖表也會迅速變化（一個很好的例子就是目前Nokia正在與Microsoft合作生產(chǎn)基于WindowsPhone7的設(shè)備——而在jQuery Mobile中WP7的支持等級為A）。

jQuery Mobile始終貫徹漸進增強的設(shè)計觀念來滿足你的開發(fā)需要。jQuery mobile的核心能使得基本的HTML標(biāo)簽在所有的瀏覽器中生效，在此基礎(chǔ)之上，再對網(wǎng)頁的行為和效果進行增強，這意味著你的網(wǎng)頁在等級較高的瀏覽器中能獲得非常優(yōu)秀的體驗，而在較差的瀏覽器也能正常的使用。

繁雜的移動瀏覽器們帶來了巨大的挑戰(zhàn)。一方面某些瀏覽器（例如Android的原生瀏覽器，Safari移動版等）都基于WebKit的一個變種版本（WebKit是一個web渲染引擎，GoogleChrome桌面版，Apple的Safari都采用了該引擎。WebKit并不知道當(dāng)前運行的網(wǎng)絡(luò)的好壞，操作系統(tǒng)是什么甚至屏幕滾動到了哪里，為了讓W(xué)ebKit知道這些情況，操作系統(tǒng)/瀏覽器/設(shè)備廠商都需要基于WebKit來構(gòu)建自己的瀏覽器程序），并帶有豐富的特性。另一方面Nokia的Symbian和WindowsMobile6（及更早的版本）這些胡亂支持標(biāo)準(zhǔn)的設(shè)備又占有相當(dāng)大的市場。雪上加霜的是，WebKit在不同移動設(shè)備中還有不同的版本。所以漸進增強的基本目標(biāo)就是你的內(nèi)容能夠在任何的設(shè)備中都能夠正常“顯示”。

jQuery Mobile使用入門：

使用jQuery Mobile的第一步，先創(chuàng)建一個html頁面，并在head標(biāo)簽中加入以下內(nèi)容：

正如你在代碼中看到的，jQuery Mobile是jQuery的一個擴展。目前來說，壓縮后的jQuery mobile僅12Kb。

上面的代碼均來自jQuery的CDN服務(wù)器，css文件中也包含必需的圖片鏈接，如果你需要在你自己的服務(wù)器上運行，可以下載下面的文件解壓縮后部署到你的服務(wù)器上：

ZipFile:jquery.mobile-1.0b2.zip 

在創(chuàng)建第一個jQuery Mobile頁面時你需要創(chuàng)建三塊基本內(nèi)容，下面的推薦模版展示了這一過程，你可以在未來的項目中使用它：

PageTitle  
Pagecontentgoeshere.  
PageFooter 

在模版中有些地方值得我們注意。首先是DIV元素的使用，我們知道，既然HTML5在移動設(shè)備中如此流行，為什么不使用更加新的HEADER,ARTICLE,SECTION,FOOTER元素呢？這是因為較老的智能手機瀏覽器無法明白新的HTML5元素。在某些情況下，例如windowsphone上老版本的IE會出現(xiàn)一個bug使得無法加載頁面的css。而DIV元素卻被廣泛支持。

此時你已經(jīng)可以保存你的網(wǎng)頁并在瀏覽器中查看了，這些代碼同樣可以在桌面瀏覽器中正常工作。我推薦你使用Chrome來進行本地測試。要在真實環(huán)境測試，你就需要相應(yīng)移動設(shè)備了。

使用超鏈接

普通網(wǎng)頁和移動網(wǎng)頁的一個巨大的不同便是屏幕中呈現(xiàn)內(nèi)容的數(shù)量多寡上。雖然你可以在你的iPhone上加載紐約時報的主頁，但你需要縮放它才能順利閱讀上面的內(nèi)容。這樣的體驗并不好，而更好的解決方案是減少那些雜亂的內(nèi)容，只在屏幕上顯示你需要顯示的內(nèi)容。

如果是傳統(tǒng)的網(wǎng)站，你可能會創(chuàng)建一些包含少量內(nèi)容的子頁面，而當(dāng)你使用jQuery Mobile時，你最好在頁面中包含“微量”的內(nèi)容，這樣才會更有效率。

在上面例子中你已經(jīng)看到了如何利用模版來創(chuàng)建一個頁面。現(xiàn)在讓我們更進一步，來創(chuàng)建內(nèi)容的“page”。jQuery Mobile中的一個“page”結(jié)構(gòu)一般使用一個DIV來組織?，F(xiàn)在你可以使用上面的模板來創(chuàng)建一個包含四個跳轉(zhuǎn)到其他頁面的鏈接的導(dǎo)航頁面：

Menu  
Whatvehiclesdoyoulike?  
Cars  
Trains  
Planes  
PageFooter 

上面這段代碼中第一個div非常重要，它包含有一個id和一個data-role屬性：

data-role="page"id="menu" 

data-role定義了這個div是一個“page”，page這個術(shù)語稍微有點讓人誤解，“page”這里其實指的是一個可視面或者在屏幕里未隱藏的HTML代碼部分，而不是指的一個單獨的頁面（或者說單獨的HTML文件）。data-role="page"意味著jQuery Mobile會根據(jù)div元素在屏幕中構(gòu)建可視內(nèi)容。而id屬性允許你通過a標(biāo)簽鏈接到該page，或者其他page。

上面創(chuàng)建的導(dǎo)航頁是我們在瀏覽器看到的第一個頁面，接下來我們再添加三個“page”，他們有不同的id：Cars，Planes，Trains。

Cars  
Wecanaddalistofcars  
PageFooter  
Trains  
Wecanaddalistoftrains  
PageFooter  
Planes  
Wecanaddalistofplanes  
PageFooter 

現(xiàn)在，在你的Android或者IOS設(shè)備里測試一下，當(dāng)你加載好頁面后你會發(fā)現(xiàn)這三件事情：

導(dǎo)航頁出現(xiàn)在屏幕中（你可以上下滾動一下，并沒有別的東西出現(xiàn)）

當(dāng)你點擊一個鏈接時，會動畫切換到另一個頁面。

新頁面的頂部會自動出現(xiàn)一個“back”按鈕（譯注：jQuery Mobile目前版本默認(rèn)已經(jīng)取消了這一功能）

其實這些div元素預(yù)先會加載并緩存到你的瀏覽器中，因此“頁面”間的切換會非常流暢。

在同一個HTML頁面創(chuàng)建多個在屏幕上顯示的“頁面”使得你可以大大減少頁面加載的次數(shù)，但同時也會導(dǎo)致許多移動設(shè)備運行緩慢。jQuery Mobile將頁面所有的鏈接跳轉(zhuǎn)都視作Ajax調(diào)用，這樣可以充分利用CSS的過渡效果，當(dāng)你想要鏈接到你自己的web程序之外的某些鏈接時，你可以這樣編寫你的鏈接代碼：

madinc.co

如上所示，僅需要為a標(biāo)簽添加rel="external"屬性即可。然而jQuery Mobile對于（同域的）外部鏈接并不是簡單地跳轉(zhuǎn)完事兒，相比于其他移動框架它更進了一步，因為他對（同域的）所有鏈接都采用Ajax調(diào)用方式，從而實現(xiàn)漂亮的轉(zhuǎn)場效果?；诖四憧梢詫⒛愕木W(wǎng)頁內(nèi)容分離到許多頁面來創(chuàng)建更大型的項目。

使用組件

鏈接和頁面只是移動網(wǎng)頁設(shè)計中一個很小的部分，APP程序（比如采用Object-C，C#，java等在Android或者IOS設(shè)備上創(chuàng)建的本地應(yīng)用程序）快速增長的同時產(chǎn)生了豐富的控件和組件（例如菜單欄，列表等控件）使得開發(fā)者可以很方便地創(chuàng)建復(fù)雜的應(yīng)用程序，這正是許多移動網(wǎng)頁開發(fā)者第二個巨大的挑戰(zhàn)——因為在原生的HTML里面并沒有這些控件或者組件。

針對這一問題，jQuery Mobile當(dāng)前正在創(chuàng)建一組非常有用的組件。以下是在alpha版本中已經(jīng)發(fā)布的組件：

Pages（頁面）

Dialogboxes（對話框）

Toolbars（工具欄）

Buttons（按鈕）

Contentformatting（內(nèi)容格式化）

Formelements（表單）

Listviews（列表）

只要你懂的一點點的HTML，你會發(fā)現(xiàn)添加這些組件并不困難，接下來我們看幾個例子。

為頁面添加header和footer

上面的模版已經(jīng)為你展示了如何輕松地創(chuàng)建工具欄（header，footer）。我們知道，在不同尺寸的屏幕上創(chuàng)建自適應(yīng)工具欄通常都是非常難的活兒。而現(xiàn)在，jQuery Mobile讓你能夠非常容易地創(chuàng)建一個帶有一個居中標(biāo)題和兩個按鈕并且自適應(yīng)任何屏幕尺寸的header：

Cancel  
EditContact  
Save 

代碼中a標(biāo)簽的順序決定了按鈕顯示的位置。以上代碼在幾乎所有的設(shè)備中都能取得一致的顯示效果。

header和footer同樣可以被自定義為你想要的樣式，比如改造一個導(dǎo)航條：你可以添加一些按鈕在footer里面，從而導(dǎo)航到某一頁面的不同部分：

ElizabethII  
ReignSince1952  
Details 

在你需要展現(xiàn)富文本時這種列表尤為有用，比如顯示一個包含照片，名字，平均分等信息的學(xué)生名單。

部署你的jQuery Mobile站點

當(dāng)你完成了開發(fā)，最后一步當(dāng)然是讓全世界都看到你的工作成果啦~

到現(xiàn)目前為止，jQuery Mobile都只是包含了一些HTML，CSS，javascript文件罷了，部署方式與一般的HTML站點無異。用FTP（或者其他你喜歡的方式）上傳到你的web服務(wù)器就可以了，當(dāng)然，你要確保你上傳了所有用到的文件。

此時已經(jīng)大功告成，你就可以用你的移動設(shè)備訪問站點啦！

使用jQuery Mobile的目標(biāo)群是移動設(shè)備用戶，因此你可以考慮為你的網(wǎng)站創(chuàng)建兩個版本，一個為桌面用戶準(zhǔn)備，另一個則為移動用戶（準(zhǔn)備比如主站為www.xxxx.com，移動站位m.xxxx.com）。

接下來呢？

jQuery Mobile當(dāng)前版本已經(jīng)做了非常多的工作，如果你想進入移動開發(fā)領(lǐng)域那么現(xiàn)在已經(jīng)無需再等待了，jQuery Mobile讓一切都來得那么簡單。

小結(jié)：解析jQuery Mobile入門學(xué)習(xí)教程的內(nèi)容介紹完了，希望通過本文的學(xué)習(xí)能對你有所幫助！