[翻译]jQuery Mobile教程-创建一个订餐web应用(上)

原文地址：

http://www.cnblogs.com/jackz3/archive/2012/04/13/2444290.html

 

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