使用jQuery Mobile创建餐厅订餐应用

  次阅读 作者:智能小宝 来源:互联网 2016-01-19 11:22 我要评论(0)

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

从零开始创建移动Web应用需要编程者学习专门的移动编程知识技能,还要有比如专门的编码工具(比如专门为iOS系统开发应用的工具),再有就是需 要在每一个平台都进行测试部署(如Andr漠椀搀,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,如下:

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

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...