jQuery Mobile入門學習教程是本文要介紹的內容，主要是來了解jQuery Mobile的使用方法，文中很詳解的講解了jQuery Mobile學習教程。

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

AppleiPhone/iPodTouch  
GoogleAndroid  
RIMBlackBerry/PlaybookOS 

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

HP/PalmWebOS  
MicrosoftWindowPhone7 

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

用jQuery Mobile來開發網站

Gartnerstudy(link)的數據表明在未來將會有越來越多的用戶通過手機或者平板電腦訪問你的網站，到2013年，將會有18億的移動設備用戶，對你的web設計團隊來說開發移動站點已經不能再僅僅是“計劃”而已了，你必須將你的移動站點迅速變為“現實”才行。

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

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

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

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

jQuery Mobile使用入門：

使用jQuery Mobile的第一步，先創建一個html頁面，并在head標簽中加入以下內容：

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

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

ZipFile:jquery.mobile-1.0b2.zip 

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

PageTitle  
Pagecontentgoeshere.  
PageFooter 

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

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

使用超鏈接

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

如果是傳統的網站，你可能會創建一些包含少量內容的子頁面，而當你使用jQuery Mobile時，你最好在頁面中包含“微量”的內容，這樣才會更有效率。

在上面例子中你已經看到了如何利用模版來創建一個頁面。現在讓我們更進一步，來創建內容的“page”。jQuery Mobile中的一個“page”結構一般使用一個DIV來組織。現在你可以使用上面的模板來創建一個包含四個跳轉到其他頁面的鏈接的導航頁面：

Menu  
Whatvehiclesdoyoulike?  
Cars  
Trains  
Planes  
PageFooter 

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

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

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

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

Cars  
Wecanaddalistofcars  
PageFooter  
Trains  
Wecanaddalistoftrains  
PageFooter  
Planes  
Wecanaddalistofplanes  
PageFooter 

現在，在你的Android或者IOS設備里測試一下，當你加載好頁面后你會發現這三件事情：

導航頁出現在屏幕中（你可以上下滾動一下，并沒有別的東西出現）

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

新頁面的頂部會自動出現一個“back”按鈕（譯注：jQuery Mobile目前版本默認已經取消了這一功能）

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

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

madinc.co

如上所示，僅需要為a標簽添加rel="external"屬性即可。然而jQuery Mobile對于（同域的）外部鏈接并不是簡單地跳轉完事兒，相比于其他移動框架它更進了一步，因為他對（同域的）所有鏈接都采用Ajax調用方式，從而實現漂亮的轉場效果。基于此你可以將你的網頁內容分離到許多頁面來創建更大型的項目。

使用組件

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

針對這一問題，jQuery Mobile當前正在創建一組非常有用的組件。以下是在alpha版本中已經發布的組件：

Pages（頁面）

Dialogboxes（對話框）

Toolbars（工具欄）

Buttons（按鈕）

Contentformatting（內容格式化）

Formelements（表單）

Listviews（列表）

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

為頁面添加header和footer

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

Cancel  
EditContact  
Save 

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

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

ElizabethII  
ReignSince1952  
Details 

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

部署你的jQuery Mobile站點

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

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

此時已經大功告成，你就可以用你的移動設備訪問站點啦！

使用jQuery Mobile的目標群是移動設備用戶，因此你可以考慮為你的網站創建兩個版本，一個為桌面用戶準備，另一個則為移動用戶（準備比如主站為www.xxxx.com，移動站位m.xxxx.com）。

接下來呢？

jQuery Mobile當前版本已經做了非常多的工作，如果你想進入移動開發領域那么現在已經無需再等待了，jQuery Mobile讓一切都來得那么簡單。

小結：解析jQuery Mobile入門學習教程的內容介紹完了，希望通過本文的學習能對你有所幫助！