JQuery Mobile自發布以來一直在調整變化。我翻譯一篇較新的教程來重溫這個易用的框架。原文作者Stephanie Walter。
jQuery 框架在web上廣泛使用已經有一段時間了，jQuery技術基本是為瀏覽器應用而設計的。而jQuery Mobile是基於jQuery的框架，使得web設計師可以創建為移動設備（智能手機和平板電腦）優化的web app。這個框架對觸控優化，使用響應式布局，因此元素將自動適配不容的設備尺寸，並且支持一系列不同的平台和設備。
在這個jQuery Mobile教程中，我們將從頭開始創建一個漂亮的演示程序，來展示一些使用這個強大的工具可以輕易完成的事情。
在我們開始之前，你可以下載源代碼,或者看在線演示, 或拍攝qrcode，直接顯示在手機上。
迷你應用概述：餐廳選擇器
我們將創建一個應用，讓用戶根據當晚想要吃的餐型，所在城鎮和用戶評級，選擇一家餐廳。我們創建的jQuery Mobile迷你應用叫做“Restaurant Picker”
請注意，這里只講前端開發。如果你想創建一個真實的應用。你顯然還需要服務器和數據庫。另外，jQuery Mobile使用Ajax導航，你需要文件放在本地(xampp, mamp等等)或者放在真正的服務器上，使得演示正常工作。
線框我們的應用程序
為了明確我們的目標。 我們先畫一些線框，看看應用每個屏幕畫面的樣子。
主屏幕：選擇餐型
在第一屏，我們先放置應用的logo。然后讓用戶在不同的餐廳類型中選擇。每個選項包括一個圖示和一個鏈接，引導用戶到第二屏，選擇城鎮。
選擇城鎮
在第二屏，用戶可以選擇他們想要用餐的城鎮。 城鎮顯示為一個可點擊的列表。此外，每個城鎮選項根據已選擇的餐廳類型，在氣泡提示中給出有效餐廳數量。
由於城鎮列表可能相當長，我們將安排一個過濾器使得用戶能快速搜索到列表后部的城鎮。標題欄包括應用標識和一個返回按鈕，用戶點擊返回到上一步。
當用戶點擊一個城鎮，將引導至選擇餐廳頁面。
選擇餐廳
標題欄包括應用標識和一個返回按鈕，用戶可以點擊返回上一步。用戶點擊某個餐廳將顯示詳細信息。
餐廳詳細信息
餐廳詳細視圖包括三個部分：餐廳詳細信息，聯系方式和用戶評級。
餐廳詳細信息顯示一個簡短的餐廳描述，一些餐圖，如果他們有網站，顯示網站鏈接。
聯系方式將顯示餐廳的地址和餐廳位於谷歌地圖的圖片。一個鏈接讓用戶打開谷歌地圖(用瀏覽器或谷歌地圖應用，取決於設備)定位餐廳。另有一個鏈接將直接在移動設備上撥打餐廳電話，使得用戶可以預訂位子。
視圖的最后部分是一個選擇框，用戶能給餐廳評分。
構建web應用基礎
現在有了明確的方向，我們可以開始一點點深入到代碼。
jQuery Mobile基礎
首先讓我們看一下我們HTML頁面的頭部：
< HTML >
< head >
< meta charset ="UTF-8" >
< title > Restaurant Picker </ title >
< meta name ="viewport" content ="width=device-width, initial-scale=1" >
< link rel ="stylesheet" href ="jquery.mobile.structure-1.0.1.CSS" />
< link rel ="stylesheet" href ="jquery.mobile-1.0.1.CSS" />
< script src ="js/jquery-1.7.1.min.js" ></ script >
< script src ="js/jquery.mobile-1.0.1.min.js" ></ script >
</ head >
首先要注意的是“新”的HTML5 doctype。jQuery Mobile在DOM中大量使用帶有HTML5 data- 屬性的元素來樣式化頁面，因此我們需要用HTML5 doctype使一切正常工作。
其次注意meta name=viewport標記。我們用這個meta更好的控制我們的viewport。沒有這個標記，瀏覽器將擠壓整個頁面的布局，頁面將看上去丑陋和微小。width=device-width表示使用設備的原生寬度，使程序適合設備的全部尺寸而沒有被擠壓。initial-scale屬性控制頁面首 次載入的縮放等級，設為1表示當頁面加載時不縮放。
接着我們引用css文件，在較早的jQuery Mobile版本，css是一個文件，但在新版本中他們區分了結構和實際設計(顏色，漸變等)，使得創建自定義樣式更容易。
最后我們需要加載jQuery和jQuery Mobile JavaScript代碼庫，因為它依靠jQuery庫來工作。
你想吃什么：首頁
現在讓我們看一看首頁的HTML代碼 ，這個頁面命名為index.html
< div data-role ="page" id ="home" data-theme ="c" >
< div data-role ="content" >
< div id ="branding" >
< h1 > Restaurant Picker </ h1 >
</ div >
< div class ="choice_list" >
< h1 > What would you'd like to eat? </ h1 >
< ul data-role ="listview" data-inset ="true" >
< li >< a href ="choose_town.HTML" data-transition ="slidedown" > < img src ="sushis.jpg" /> < h3 > Some Sushis </ h3 ></ a ></ li >
< li >< a href ="choose_town.HTML" data-transition ="slidedown" > < img src ="pizza.jpg" /> < h3 > A Pizza </ h3 ></ a ></ li >
< li >< a href ="choose_town.HTML" data-transition ="slidedown" > < img src ="kebap.jpg" /> < h3 > A Kebap </ h3 ></ a ></ li >
< li >< a href ="choose_town.HTML" data-transition ="slidedown" > < img src ="burger.jpg" /> < h3 > A Burger </ h3 ></ a ></ li >
< li >< a href ="choose_town.HTML" data-transition ="slidedown" > < img src ="nems.jpg" /> < h3 > Some Nems </ h3 ></ a ></ li >
< li >< a href ="choose_town.HTML" data-transition ="slidedown" > < img src ="tradi.jpg" /> < h3 > Something more traditional </ h3 ></ a ></ li >
</ ul >
</ div >
</ div >
</ div > <!-- /page -->
</ body >
</ HTML >
jQuery Mobile中HTML文檔和頁面是不同概念。一個jQuery Mobile應用可能是一個包括有多個頁面的HTML文檔組成，每個頁面使用data-role="page"屬性，用錨點鏈接；或者使用多個html文檔，每個文檔有自己的data-role="page"，用“標准”的鏈接。在我們的案例中，我們將為每個頁面建立一個HTML文檔。
這樣我們先展開body，然后用<div data-role=”page” id=”home” data-theme=”c”>創建頁面。
接着展開內容div，里面放置應用標識和主標題后面是一個餐廳類型列表。
在<ul>標記中加入data-role="listview"屬性來創建jQuery Mobile列表。這里用data-inset="true"設列表樣式為inset(有圓角和四周空白) 。
每個列表元素<li>包含一個<a href>鏈接，jQuery Mobile將自動轉換為列表項。要添加圖片，只需簡單的加一個圖片標記在<a href>內，jQuery Mobile會為我們處理好：它會顯示在列表左側，相當容易。
用data-transition="slidedown"建立兩個頁面之間的過渡效果。你可以在官方文檔中找到更多過渡效果。
首頁圖面如下：
在哪里吃：第二頁
第二頁命名為choose_town.html。下面是HTML代碼，接着解釋難點部分。請注意頭部沒有變化。
< div id ="choisir_ville" data-role ="page" data-add-back-btn ="true" >
< div data-role ="header" >
< h1 > Restaurant Picker </ h1 >
</ div >
< div data-role ="content" >
< div class ="choice_list" >
< h1 > In which town do you want to eat? </ h1 >
< ul data-role ="listview" data-inset ="true" data-filter ="true" >
< li >< a href ="choose_restaurant.HTML" data-transition ="slidedown" > Amiens < span > 3 </ span ></ a > </ li >
< li >< a href ="choose_restaurant.HTML" data-transition ="slidedown" > Bastia < span > 2 </ span ></ a > </ li >
< li >< a href ="choose_restaurant.HTML" data-transition ="slidedown" > Belfort < span class ="ui-li-count" > 5 </ span ></ a > </ li >
< li >< a href ="choose_restaurant.HTML" data-transition ="slidedown" > Bordeaux < span class ="ui-li-count" > 1 </ span ></ a > </ li >
…
</ ul >
</ div >
</ div >
</ div > <!-- /page -->
</ body >
我們改變了頁面的id，這讓jQuery Mobile知道這是另一個頁面。請注意我們使用data-add-back-btn="true"在頁面上，這將啟用Ajax導航返回並且自動添加一個返回按鈕在標題欄上。
要創建標題欄，我們添加 一個div元素，設data-role="header"。
為了在列表上加一個過濾器，簡單的在列表的ul元素上設data-filter="true"即可。請注意這是一個過濾器，可以過濾列表項，而不是搜索條。
最后的要點，我們將在列表項右邊創建氣泡數字提示，添加一個帶類(li-count)的span包含數字。如下是第二頁畫面
選擇餐廳：第三頁
這一頁命名為choose_restauant.html，如下是HTML代碼的樣子
< div id ="choisir_restau" data-role ="page" data-add-back-btn ="true" >
< div data-role ="header" >
< h1 > Restaurant Picker </ h1 >
</ div >
< div data-role ="content" >
< div class ="choice_list" >
< h1 > Please choose a restaurant. </ h1 >
< ul data-role ="listview" data-inset ="true" >
< li >< a href ="restaurant.html" data-transition ="slidedown" > < img src ="restau01_mini.jpg" /> < h2 > Le Mouffetard </ h2 > < p class ="classement four" > 4 stars </ p ></ a ></ li >
< li >< a href ="restaurant.html" data-transition ="slidedown" > < img src ="restau02_mini.jpg " /> < h2 > Chocolate bar </ h2 > < p class ="classement four" > 4 stars </ p > </ a ></ li >
< li >< a href ="restaurant.html" data-transition ="slidedown" > < img src ="restau03_mini.jpg " /> < h2 > Restaurant Diona </ h2 > < p class ="classement one" > 1 star </ p > </ a ></ li >
< li >< a href ="restaurant.html" data-transition ="slidedown" > < img src ="restau04_mini.jpg " /> < h2 > Tai Shan </ h2 > < p class ="classement three" > 3 stars </ p > </ a ></ li >
< li >< a href ="restaurant.html" data-transition ="slidedown" > < img src =" restau05_mini.jpg" /> < h2 > Arcade </ h2 > < p class ="classement two" > 2 stars </ p > </ a ></ li >
</ ul >
</ div >
</ div >
</ div > <!-- /page --> http://jquerymobile.com/demos/1.1.0-rc.2/docs/content/content-grids.html
</ body >
這個頁面和首頁很相似，除了標題欄和用戶提示。在上一節中我們已經知道如何建立標題欄。對於用戶評級，我們添加一個p元素帶兩個類：.classment作用於所有元素，將樣式化元素為小星號，然后我們用類.one、.two、.three和.four來區別顧客給餐廳的星級。我們將在后面的文章看到如何用一個很好的方式來樣式化，但目前，我們仍保持純文本。
第三頁效果如下：
餐廳詳細信息：第四頁
這個頁面命名為restaurant.html，是所有頁面中最復雜的，主要因為有大量元素在上面。我們把代碼分為三個部分：餐廳描述，聯系方式和用戶評級。下面是全部HTML代碼
< div id ="restau" data-role ="page" data-add-back-btn ="true" >
< div data-role ="header" >
< h1 > Restaurant Picker </ h1 >
</ div >
< div data-role ="content" >
< div class ="ui-grid-a" id ="restau_infos" >
< div class ="ui-block-a" >
< h1 > Le Mouffetard </ h1 >
< p >< strong > Restaurant bar in the center of Strasbourg </ strong ></ p >
< p > On the menu: </ p >
< ul >
< li > Milkshake with chocolat </ li >
< li > Planchettes </ li >
< li > Leek pie </ li >
</ ul >
</ div >
< div class ="ui-block-b" >
< p >< img src ="restau01.jpg" alt ="jeannette photo" /></ p >
< p >< a href ="http://www.google.fr" rel ="external" data-role ="button" > See our website </ a ></ p >
</ div >
</ div > <!-- /grid-a -->
< hr />
< div class ="ui-grid-a" id ="contact_infos" >
< div class ="ui-block-a" >
< h2 > Contact us </ h2 >
< p > 30 Rue des Tonneliers </ p >
< p > 67000 Strasbourg </ p >
</ div >
< div class ="ui-block-b" >
< img src ="01_maps.jpg" alt ="plan jeanette" />
</ div >
</ div > <!-- /grid-a -->
< div id ="contact_buttons" >
< a href ="http://maps.google.fr/maps?q=jeannette+et+les+cycleux&hl=fr&sll=46.75984,1.738281&sspn=10.221882,18.764648&hq=jeannette+et+les+cycleux&t=m&z=13&iwloc=A" data-role ="button" data-icon ="maps" > Find us on Google Maps </ a >
< a href ="tel:0388161072" data-role ="button" data-icon ="tel" > Call us </ a >
</ div >
< hr />
< div id ="notation" >
< form >
< label for ="select-choice-0" class ="select" >< h2 > User rating </ h2 ></ label >
< select name ="note_utilisateur" id ="note_utilisateur" data-native-menu ="false" data-theme ="c" >
< option value ="one" class ="one" > Not good at all </ option >
< option value ="two" class ="two" > Average </ option >
< option value ="three" class ="three" > Pretty good </ option >
< option value ="four" class ="four" > Excellent </ option >
</ select >
</ form >
</ div >
</ div >
</ div > <!-- /page -->
</ body >
對於餐廳詳細信息，我們使用jQuery Mobile兩列布局。要創建一個兩列塊，我們添加一個塊包含兩個子塊。為了給網站創建一個好看的按鈕，我們給a href元素添加data-role="button"屬性並且添加rel="external"這樣jQuery Mobile知道不啟用Ajax打開鏈接，因為這是一個外部鏈接。
對於聯系方式，我們再次使用兩列布局。這里要強調的是按鈕。data-icon="maps"和data-icon="tel"將給這些按鈕添加自定義圖標。
一個有趣的部分是添加的谷歌地圖鏈接，某些手機能檢測到，用戶將被詢問是否用瀏覽器還是谷歌地圖應用打開。另一個有趣的部分是href=tel:0388161072協議。這在傳統瀏覽器上不起作用，但智能手機能用撥號界面打開鏈接，直接撥打該號碼。
最后是用戶評級。我們將用一個簡單的選擇菜單來完成。設data-native-menu="false"使得jQuery Mobile來樣式化選擇框，這樣我們能添加一些好看的星號，再次注意到我們用類one,two,three,four做進一步的樣式化。
至此，我們有了一個功能完全的jQuery Mobile webapp。不過這個應用看上去很jQuery Mobile風格，因此我們必須給它再加一些樣式，使它看上去更好。
未完待續，下半部更精彩