[翻译]jQuery Mobile教程-创建一个订餐web应用(上)
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风格，因此我们必须给它再加一些样式，使它看上去更好。
未完待续，下半部更精彩
