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风格，因此我们必须给它再加一些样式，使它看上去更好。
未完待续，下半部更精彩