[翻译]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页面的头部：

<! DOCTYPE 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

< body >

< 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代码，接着解释难点部分。请注意头部没有变化。

< body >

< 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代码的样子

< body > 
< 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代码

< body >
< 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风格，因此我们必须给它再加一些样式，使它看上去更好。

未完待续，下半部更精彩