您所在的位置:移动开发 > Android > 工具&引擎 > 使用jQuery Mobile创建餐厅订餐应用(1)

使用jQuery Mobile创建餐厅订餐应用(1)

2012-10-09 09:28 廖煜嵘 译 51CTO.com 字号:T | T
一键收藏,随时查看,分享好友!

目前,智能手机的数量越来越多,也变的越来越复杂了,越来越多的企业希望拥有自己的移动应用程序 ,但如果从零开始创建移动web应用,其成本可能是相当昂贵的。

AD:

【51CTO译文】从零开始创建移动Web应用需要编程者学习专门的移动编程知识技能,还要有比如专门的编码工具(比如专门为iOS系统开发应用的工具),再有就是需要在每一个平台都进行测试部署(如Andr​​oid,iOS,BlackBerry,Windows Mobile等)。

这样的话,开发移动应用将花费不少,而另一个解决方案是再使用HTML,CSS,Javascript,它们的特点是跨平台和跨设备。此外,目前已经出现了不少专为移动web应用开发的专门框架,比如jQuery Mobile。jQuery Mobile是专门为移动web应用开发而定制使用的,只要掌握HTML,CSS,JavaScript和jQuery,就可以很容易使用它进行移动web app开发,而且开发出来的应用能适应不同的平台和设备。

在本文中,将指导用户一步步实现一个移动订餐的jQuery Mobile应用,阅读对象为有一定jQuery基础的用户。

本文的代码可以在此处可以下载,而在线的效果可以在这里看到。

应用概述

我们将创建的这个移动web应用,是一个能让用户选择晚餐餐厅的应用,使用户能够选择想去什么餐厅。要注意的是,本文只是讲解了前端的技术应用,如果要让这个应用真正实际运行其来,还需要使用服务端的编程技术去动态更新餐厅的数据,因为篇幅问题所以本文就忽略该部分,用户可以按照实际需要进行改造。

 设计构图

为了方便我们的设计,我们看下整个应用的草图,首先在第一屏中,显示的是有什么菜式可供选择,并且要显示应用的logo如下图:

在第一屏中,我们将放置我们的应用程序的标志。然后,我们以列表的形式列出各种菜式,每一个列表项的前面,将是菜式的图片。当用户点每个菜式的图(或者是箭头时),将引导到第二个页面,将会让用户选择到哪一个小镇选择餐馆,如下图:

在第二屏中,用户可以选择想要去餐馆的城镇。在城镇的列表中,每个城镇的名称后面都有一个数字,标出了能在这个城镇中可以预订的餐馆的数量。

由于城镇的名单可以很长,我们会提供一个过滤器,用户可以在过滤框中输入城镇的名称,则会自动显示筛选出符合的城镇名称,此外,用户可以使用后退按钮返回到上一步。

当用户点击一个城镇的时候,打开的是该城镇的具体餐厅的名称,如下图:

现在,用户可以选择要去就餐的餐厅。其中图片是餐厅的缩略图,用五角星显示出餐厅的评级。当用户再点右箭头时,可以查看这家餐厅的具体信息。如下图:

餐厅的详细信息界面是由三部分组成:餐厅详细资料,联系方式,用户的评级打分。首先在最上部,是餐厅的简单介绍,包括了图片和链接。而第二部分的联系信息,则显示了餐馆的地址,还包括一个调用Google Map查看餐馆地址详细信息的功能(当然要用户的设备能连接上网并且安装了google地图),此外还有一个Call us的按钮,直接拨打餐馆的电话。

最后一个部分还包括用户对餐馆等级的点评。

开始动手设计

下面我们可以开始动手设计程序了。首先是设计出jQuery Mobile的基本框架页,其中最重要的是页面的头部,其中引入了jQuery Mobile的相关框架js,如下:

  1.    <!DOCTYPE HTML> 
  2.  
  3. <HTML> 
  4.  
  5. <head> 
  6.  
  7. <meta charset="UTF-8"> 
  8.  
  9. <title>Restaurant Picker</title> 
  10.  
  11. <meta name="viewport" content="width=device-width, initial-scale=1"> 
  12.  
  13. <link rel="stylesheet" href="jquery.mobile.structure-1.0.1.CSS" /> 
  14.  
  15. <link rel="stylesheet" href="jquery.mobile-1.0.1.CSS" /> 
  16.  
  17. <script src="js/jquery-1.7.1.min.js"></script> 
  18.  
  19. <script src="js/jquery.mobile-1.0.1.min.js"></script> 
  20.  
  21. </head> 
  22.  

首先要注意的是,jQuery Mobile中使用的是HTML 5的doctype命名空间,而且jQuery Mobile中大量使用了HTML 5的特性。接下来,要注意的是meta标签中的为viewport的属性,主要是用来控制屏幕的显示。如果不使用这个标记的话,由于移动设备的屏幕大小问题,会把页面进行一定的压缩,这样就会导致走样。如果设置了content="width=device-width, initial-scale=1",则表明应用的页面将完整利用设备的宽度,而且不进行缩放,比例依然为1:1,initial-scale=1表明当页面进行加载时依然维持原来的比例。

接下来,分别引用了jQuery Mobiled的样式CSS文件,以及jQuery 1.7的js文件(注意这个是必须的),jQuery Mobile框架本身的文件。

内容导航
 第 1 页:应用概述  第 2 页:第一个页面
 第 3 页:第二个页面  第 4 页:第三个页面及总结



分享到:

热点职位

更多>>

热点专题

更多>>

读书

Eclipse插件开发方法与实战
本书分为4个部分共24章,以插件开发为中心,围绕插件开发主要介绍SWT/JFace的应用、插件扩展点的实现,以及GEF、EMF和RCP的相关

51CTO旗下网站

领先的IT技术网站 51CTO 领先的中文存储媒体 WatchStor 中国首个CIO网站 CIOage 中国首家数字医疗网站 HC3i