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

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

AppleiPhone/iPodTouch  
GoogleAndroid  
RIMBlackBerry/PlaybookOS 

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

HP/PalmWebOS  
MicrosoftWindowPhone7 

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

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

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

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

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

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

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

jQuery Mobile使用入門：

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

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

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

ZipFile:jquery.mobile-1.0b2.zip 

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

PageTitle  
Pagecontentgoeshere.  
PageFooter 

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

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

使用超鏈接

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

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

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

Menu  
Whatvehiclesdoyoulike?  
Cars  
Trains  
Planes  
PageFooter 

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

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

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

上面創(chuàng)建的導(dǎo)航頁(yè)是我們?cè)跒g覽器看到的第一個(gè)頁(yè)面，接下來我們?cè)偬砑尤齻€(gè)“page”，他們有不同的id：Cars，Planes，Trains。

Cars  
Wecanaddalistofcars  
PageFooter  
Trains  
Wecanaddalistoftrains  
PageFooter  
Planes  
Wecanaddalistofplanes  
PageFooter 

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

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

當(dāng)你點(diǎn)擊一個(gè)鏈接時(shí)，會(huì)動(dòng)畫切換到另一個(gè)頁(yè)面。

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

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

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

madinc.co

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

使用組件

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

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

Pages（頁(yè)面）

Dialogboxes（對(duì)話框）

Toolbars（工具欄）

Buttons（按鈕）

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

Formelements（表單）

Listviews（列表）

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

為頁(yè)面添加header和footer

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

Cancel  
EditContact  
Save 

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

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

ElizabethII  
ReignSince1952  
Details 

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

部署你的jQuery Mobile站點(diǎn)

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

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

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

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

接下來呢？

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

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