jQuery Mobile 入門教程_ZenDei技術網路在線

原作：Getting started with jQuery Mobile —— Matthew David 翻譯：filod 譯文：http://blog.filod.net/jquerymobile-2/295.html 轉載聲明：請註明原作、翻譯以及譯文鏈接。你每天都會對著它講話，和它玩游戲 ...

原作：Getting started with jQuery Mobile —— Matthew David

翻譯：filod

譯文：http://blog.filod.net/jquerymobile-2/295.html

轉載聲明：請註明原作、翻譯以及譯文鏈接。

你每天都會對著它講話，和它玩游戲，用它看新聞——沒錯，它就是你褲兜里的智能手機。android，黑莓還是iphone？為了讓你清楚意識到究竟哪些才算是智能手機，我在下麵總結了一個智能手機系統/設備的列表：

Apple iPhone/iPod Touch
Google Android
RIM BlackBerry/Playbook OS
Nokia Symbian (我承認它該退休了，可是在世界範圍內它仍然擁有10億以上的用戶）
HP/Palm WebOS
Microsoft Window Phone 7

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

用jQueryMobile來開髮網站

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

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

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

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

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

jQueryMobile使用入門：

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

 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
 <script src="http://code.jquery.com/jquery-1.5.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

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

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

Zip File: jquery.mobile-1.0b2.zip

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

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1></div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p></div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4></div><!-- /header --></div><!-- /page -->

這是模版頁面

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

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

使用超鏈接

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

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

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

<!-- Start of first page -->
<div data-role="page" id="menu">
   <div data-role="header">
      <h1>Menu</h1>
   </div><!-- /header -->
   <div data-role="content">   
      <p>What vehicles do you like?</p>      
      <p><a href="#Cars">Cars</a></p>
      <p><a href="#Trains">Trains</a></p>
      <p><a href="#Planes">Planes</a></p>      
   </div><!-- /content -->
   <div data-role="footer">
      <h4>Page Footer</h4>
   </div><!-- /footer -->
</div><!-- /page -->

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

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

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

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

<div data-role="page" id="Cars">
   <div data-role="header">
      <h1>Cars</h1>
   </div><!-- /header -->
   <div data-role="content">   
      <p>We can add a list of cars</p>
   </div><!-- /content -->
   <div data-role="footer">
      <h4>Page Footer</h4>
   </div><!-- /footer -->
</div><!-- /page -->
<!-- Start of third page -->
<div data-role="page" id="Trains">
   <div data-role="header">
      <h1>Trains</h1>
   </div><!-- /header -->
   <div data-role="content">   
      <p>We can add a list of trains</p>
   </div><!-- /content -->
   <div data-role="footer">
      <h4>Page Footer</h4>
   </div><!-- /footer -->
</div><!-- /page -->
<!-- Start of fourth page -->
<div data-role="page" id="Planes">
   <div data-role="header">
      <h1>Planes</h1>
</div><!-- /header -->
   <div data-role="content">   
      <p>We can add a list of planes</p>
   </div><!-- /content -->
   <div data-role="footer">
   <h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->

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

導航頁出現在屏幕中（你可以上下滾動一下，並沒有別的東西出現）
當你點擊一個鏈接時，會動畫切換到另一個頁面。
新頁面的頂部會自動出現一個“back”按鈕（譯註：jQueryMobile目前版本預設已經取消了這一功能）

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

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

<a href="http://www.madinc.co" rel="external">madinc.co</a>

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

使用組件

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

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

Pages（頁面）
Dialog boxes（對話框）
Toolbars（工具欄）
Buttons（按鈕）
Content formatting（內容格式化）
Form elements（表單）
List views（列表）

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

為頁面添加header和footer

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

<div data-role="header" data-position="inline">
   <a href="cancel.html" data-icon="delete">Cancel</a>
   <h1>Edit Contact</h1>
   <a href="save.html" data-icon="check">Save</a>
</div>

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

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

<pre class="brush:html;gutter:false;">
<div data-role="navbar">
   <ul>
      <li><a href="#nav1" class="ui-btn-active">One</a></li>
      <li><a href="#nav2">Two</a></li>
   </ul>
</div><!-- /navbar -->

從這些代碼你可以發現jQueryMobile不過是一些簡單的HTML代碼，導航條依然是div，而諸如ui-btn-active這個class可以使得你的按鈕顯示為被選擇狀態。

當你點擊一個按鈕並導航到該頁面的另一個部分時，jQueryMobile會自動加上一個back按鈕，以下的代碼結構可以清晰地展現這一過程：

<div data-role="page">
   <div data-role="header">
      <h1>Navigation</h1>
   </div><!-- /header -->
<div data-role="content">   
Navigation page   
</div><!-- /content -->
   <div data-role="footer">
   <div data-role="navbar">
      <ul>
         <li><a href="#nav1" class="ui-btn-active">One</a></li>
         <li><a href="#nav2">Two</a></li>
      </ul>
   </div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="nav1">
   <div data-role="header">
      <h1>Nav Screen 1</h1>
   </div><!-- /header -->
   <div data-role="content">   
Screen for Navigation One   </div><!-- /content -->
   <div data-role="footer">
<h4>Additional Footer information</h4>
   </div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="nav2">
   <div data-role="header">
      <h1>Nav Screen 2</h1>
   </div><!-- /header -->
   <div data-role="content">   
Screen for Navigation Two
   </div><!-- /content -->
<div data-role="footer">
<h4>Additional Footer information</h4>
</div><!-- /footer -->
</div><!-- /page -->

創建位置固定的header和footer

工具條固定在屏幕上方或者下方是一個很常見的界面設計，你可以為footer或者header添加 data-position="fixed"來實現這一點。以下代碼會強制footer/header固定在下方/上方：

 <div data-role="header" data-position="fixed">
      <h1>Navigation</h1>
   </div><!-- /header -->
   <div data-role="content" >
      <ul data-role="listview" data-dividertheme="d" style="margin-top: 0;">
         <li data-role="list-divider">Royal Family</li>
         <li><a href="#nav1">Henry VIII</a></li>
         <li><a href="#nav1">George V</a></li>
         <li><a href="#nav1">Prince of Wales</a></li>
         <li><a href="#nav1">Elizabeth I</a></li>
         <li><a href="#nav1">Elizabeth II</a></li>
         <li data-role="list-divider">Prime Miniseters</li>
         <li><a href="#nav2">Winston Churchill</a></li>
         <li><a href="#nav2">Tony Blare</a></li>
         <li><a href="#nav2">David Cameron</a></li>
      </ul>
   </div><!-- /content -->
<div data-role="footer" data-position="fixed">
   <div data-role="navbar">
      <ul>
         <li><a href="#nav1" class="ui-btn-active">Royals</a></li>
         <li><a href="#nav2">Leaders</a></li>
      </ul>
   </div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="nav1" data-position="fixed">
   <div data-role="header">
      <h1>Royal Family</h1>
   </div><!-- /header -->
<div data-role="content">
<p>Members and relatives of the British Royal Family historically represented the monarch in various places throughout the British Empire, sometimes for extended periods as viceroys, or for specific ceremonies or events. Today, they often perform ceremonial and social duties throughout the United Kingdom and abroad on behalf of the UK, but, aside from the monarch, have no constitutional role in the affairs of government. This is the same for the other realms of the Commonwealth though the family there acts on behalf of, is funded by, and represents the sovereign of that particular state, and not the United Kingdom.</P>
</div><!-- /content -->
   <div data-role="footer" data-position="fixed">
      <h4>Royal Family</h4>
   </div><!-- /header -->
</div><!-- /page -->
<div data-role="page" id="nav2" data-position="fixed">
   <div data-role="header">
      <h1>Prime Ministers</h1>
   </div><!-- /header -->
<div data-role="content">
The Prime Minister of the United Kingdom of Great Britain and Northern Ireland is the Head of Her Majesty's Government in the United Kingdom. The Prime Minister and Cabinet (consisting of all the most senior ministers, who are government department heads) are collectively accountable for their policies and actions to the Sovereign, to Parliament, to their political party and ultimately to the electorate. The current Prime Minister, David Cameron, was appointed on 11 May 2010.</div><!-- /content -->
<div data-role="footer" data-position="fixed">
   <h4>Prime Minister</h4>
      </div><!-- /header -->
   </div><!-- /page -->

看，現在不使用Objective-C ，你也可以創建一個易用的界面，是不是很不錯？

對話框

使用data-rel屬性可以方便地創建彈出式對話框，以下代碼將會以對話框形式載入dialog.html頁面：

a href="dialog.html" data-rel="dialog">Open dialog</a>

由於對話框在jQueryMobile裡面其實和其他page沒有任何區別，因此你可以在對話框里添加任何類型的HTML代碼，當然你也可以在同一個html文件里創建兩個page，一個是主界面：

<div data-role="page">
   <div data-role="header">
      <h1>Dialog Box</h1>
   </div><!-- /header -->
<div data-role="content">   
   <a href="#dialogPopUp" data-rel="dialog" data-role="button">Open dialog</a> 
</div><!-- /content -->
<div data-role="footer">
   <h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->

另一個是對話框（上面的HREF屬性便指向這個對話框page）：

<div data-role="page" id="dialogPopUp">
   <div data-role="header">
      <h1>Dialog Title</h1>
   </div><!-- /header -->
   <div data-role="content">   
      This is a dialog box      
   </div><!-- /content -->
<div data-role="footer">
<h4>Additional Footer information</h4>
</div><!-- /footer -->
</div><!-- /page -->

要註意以上代碼中footer是可選的，但是你必須包括header，因為如果沒有header，將無法顯示自動生成的對話框關閉按鈕。

列表

當你有大量的數據條目需要顯示時，列表是一個不錯的選擇。下麵是使用ul時的HTML代碼：

<ul>
   <li><a href="#nav1">Henry VIII</a></li>
   <li><a href="#nav1">George V</a></li>
   <li><a href="#nav1">Prince of Wales</a></li>
   <li><a href="#nav1">Elizabeth I</a></li>
   <li><a href="#nav1">Elizabeth II</a></li>
</ul>

　　在jQueryMobile你可以通過data-role="listview"來將一個普通的列表轉換成一個非常華麗如同本地APP一般的列表樣式：

<ul data-role="listview">
   <li><a href="#nav1">Henry VIII</a></li>
   <li><a href="#nav1">George V</a></li>
   <li><a href="#nav1">Prince of Wales</a></li>
   <li><a href="#nav1">Elizabeth I</a></li>
   <li><a href="#nav1">Elizabeth II</a></li>
</ul>

就是這樣，僅需要20個字母，你就搞定了這一切。

除此之外，jQueryMobile還為列表提供了一些增強的選項，以下代碼將為列表添加分隔符（divider):

<ul data-role="listview" data-dividertheme="d">
   <li data-role="list-divider">Royal Family</li>
   <li><a href="#home">Henry VIII</a></li>
   <li><a href="#home">George V</a></li>
   <li><a href="#home">Prince of Wales</a></li>
   <li><a href="#home">Elizabeth I</a></li>
   <li><a href="#home">Elizabeth II</a></li>
   <li data-role="list-divider">Prime Ministers</li>
   <li><a href="#home">Winston Churchill</a></li>
   <li><a href="#home">Tony Blare</a></li>
   <li><a href="#home">David Cameron</a></li>
</ul>

如上面的代碼所示，為li元素添加data-role="list-divider"即可實現分隔符的效果。

你還可以為列表添加小氣泡來展示一些附加數據（本例展示了英國皇室的統治時間）：

<ul data-role="listview" style="margin-top: 0;">
   <li><a href="#nav1">Henry VIII <span class="ui-li-count">Reign 37 Years</span></a></li>
   <li><a href="#nav1">George V <span class="ui-li-count">Reign 25 Years</span></a></li>
   <li><a href="#nav1">Prince of Wales <span class="ui-li-count">N/A</span></a></li>
<li><a href="#nav1">Elizabeth I <span class="ui-li-count">Reign 44 Years</span></a></li>
   <li><a href="#nav1">Elizabeth II<span class="ui-li-count">Reign since 1952</span></a></li>
</ul>

下麵是一個更加複雜的例子，列表中包含了鏈接，圖片，文本：

<ul data-role="listview" style="margin-top: 0;">
   <li>
      <img src="http://img.freebase.com/api/trans/image_thumb/en/henry_viii_of_england?pad=1&errorid=%2Ffreebase%2Fno_image_png&maxheight=64&mode=fillcropmid&maxwidth=64" />
      <h3><a href="index.html">Henry VIII</a></h3>
      <p>Reign 37 Years</p>
      <a href="#home">Details</a>
   </li>
   <li>
      <img src="http://www.iwise.com/authorIcons/15/King_George%20V_64x64.png" />
      <h3><a href="index.html">George V</a></h3>
<p>Reign 25 Years</p>
      <a href="#home">Details</a>
   </li>
   <li>
      <img src="http://img.freebase.com/api/trans/image_thumb/en/prince_of_wales_secondary_school?pad=1&errorid=%2Ffreebase%2Fno_image_png&maxheight=64&mode=fillcropmid&maxwidth=64" />
      <h3><a href="index.html">Prince of Wales</a></h3>
      <p>Reign N/A</p>
      <a href="#home">Details</a>
   </li>
   <li>
   <img src="http://www.iwise.com/authorIcons/13846/Elizabeth%20I%20of%20England_64x64.png" />
      <h3><a href="index.html">Elizabeth I</a></h3>
      <p>Reign 44 Years</p>
      <a href="#home">Details</a>
   </li>
   <li>
      <img src="http://www.iwise.com/authorIcons/9098/Elizabeth%20II_64x64.png" />
      <h3><a href="index.html">Elizabeth II</a></h3>
      <p>Reign Since 1952</p>
      <a href="#home">Details</a>
   </li>
</ul>

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

部署你的jQueryMobile站點

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

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

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

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

接下來呢？

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