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

JQuery Mobile自发布以来一直在调整变化。我翻译一篇较新的教程来重温这个易用的框架。原文作者Stephanie Walter。


jQuery 框架在web上广泛使用已经有一段时间了,jQuery技术基本是为浏览器应用而设计的。而jQuery Mobile是基于jQuery的框架,使得web设计师可以创建为移动设备(智能手机和平板电脑)优化的web app。这个框架对触控优化,使用响应式布局,因此元素将自动适配不容的设备尺寸,并且支持一系列不同的平台和设备。


Restaurant Picker : creating a JqueryMobile web app from scratch and styling it.

在这个jQuery Mobile教程中,我们将从头开始创建一个漂亮的演示程序,来展示一些使用这个强大的工具可以轻易完成的事情。


在我们开始之前,你可以下载源代码,或者看在线演示, 或拍摄qrcode,直接显示在手机上。

qrcode for the demo



迷你应用概述:餐厅选择器


我们将创建一个应用,让用户根据当晚想要吃的餐型,所在城镇和用户评级,选择一家餐厅。我们创建的jQuery Mobile迷你应用叫做“Restaurant Picker”


请注意,这里只讲前端开发。如果你想创建一个真实的应用。你显然还需要服务器和数据库。另外,jQuery Mobile使用Ajax导航,你需要文件放在本地(xampp, mamp等等)或者放在真正的服务器上,使得演示正常工作。


线框我们的应用程序


为了明确我们的目标。 我们先画一些线框,看看应用每个屏幕画面的样子。


主屏幕:选择餐型

Homescreen: choose a plate

在第一屏,我们先放置应用的logo。然后让用户在不同的餐厅类型中选择。每个选项包括一个图示和一个链接,引导用户到第二屏,选择城镇。


选择城镇

Choose a town wireframe

在第二屏,用户可以选择他们想要用餐的城镇。 城镇显示为一个可点击的列表。此外,每个城镇选项根据已选择的餐厅类型,在气泡提示中给出有效餐厅数量。

由于城镇列表可能相当长,我们将安排一个过滤器使得用户能快速搜索到列表后部的城镇。标题栏包括应用标识和一个返回按钮,用户点击返回到上一步。

当用户点击一个城镇,将引导至选择餐厅页面。

选择餐厅

Choose a restaurant wireframe

用户现在可以选择想要用餐的餐厅。应用显示一个餐厅列表,列表包括一个小图片,餐厅名称和以前用户给的评级。

标题栏包括应用标识和一个返回按钮,用户可以点击返回上一步。用户点击某个餐厅将显示详细信息。

餐厅详细信息

Restaurant details wireframe

餐厅详细视图包括三个部分:餐厅详细信息,联系方式和用户评级。

餐厅详细信息显示一个简短的餐厅描述,一些餐图,如果他们有网站,显示网站链接。

联系方式将显示餐厅的地址和餐厅位于谷歌地图的图片。一个链接让用户打开谷歌地图(用浏览器或谷歌地图应用,取决于设备)定位餐厅。另有一个链接将直接在移动设备上拨打餐厅电话,使得用户可以预订位子。

视图的最后部分是一个选择框,用户能给餐厅评分。


构建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><href="choose_town.HTML" data-transition="slidedown"> <img src="sushis.jpg"/> <h3> Some Sushis</h3></a></li>

<li><href="choose_town.HTML" data-transition="slidedown"> <img src="pizza.jpg"/> <h3> A Pizza </h3></a></li>

<li><href="choose_town.HTML" data-transition="slidedown"> <img src="kebap.jpg"/> <h3> A Kebap</h3></a></li>

<li><href="choose_town.HTML" data-transition="slidedown"> <img src="burger.jpg"/> <h3> A Burger</h3></a></li>

<li><href="choose_town.HTML" data-transition="slidedown"> <img src="nems.jpg"/> <h3> Some Nems </h3></a></li>

<li><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"建立两个页面之间的过渡效果。你可以在官方文档中找到更多过渡效果。

首页图面如下:


First page

在哪里吃:第二页

第二页命名为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><href="choose_restaurant.HTML" data-transition="slidedown"> Amiens <span > 3 </span></a> </li>

<li><href="choose_restaurant.HTML" data-transition="slidedown"> Bastia <span > 2 </span></a> </li>

<li><href="choose_restaurant.HTML" data-transition="slidedown"> Belfort <span class="ui-li-count" > 5 </span></a> </li>

<li><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包含数字。如下是第二页画面

Second page


选择餐厅:第三页

这一页命名为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><href="restaurant.html" data-transition="slidedown"> <img src="restau01_mini.jpg"/> <h2> Le Mouffetard</h2> <class="classement four"> 4 stars  </p></a></li>
    <li><href="restaurant.html" data-transition="slidedown"> <img src="restau02_mini.jpg "/> <h2> Chocolate bar  </h2> <class="classement four"> 4 stars  </p> </a></li>
    <li><href="restaurant.html" data-transition="slidedown"> <img src="restau03_mini.jpg "/> <h2> Restaurant Diona</h2> <class="classement one"> 1 star  </p> </a></li>
    <li><href="restaurant.html" data-transition="slidedown"> <img src="restau04_mini.jpg "/> <h2> Tai Shan</h2> <class="classement three"> 3 stars  </p> </a></li>
    <li><href="restaurant.html" data-transition="slidedown"> <img src=" restau05_mini.jpg"/> <h2> Arcade</h2> <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来区别顾客给餐厅的星级。我们将在后面的文章看到如何用一个很好的方式来样式化,但目前,我们仍保持纯文本。

第三页效果如下:

Third page

餐厅详细信息:第四页

这个页面命名为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><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">
        <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>
        <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>

Last page

对于餐厅详细信息,我们使用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风格,因此我们必须给它再加一些样式,使它看上去更好。


未完待续,下半部更精彩

posted @ 2012-04-13 17:35 杰克知足 阅读(...) 评论(...) 编辑 收藏