【51CTO译文】从零开始创建移动Web应用需要编程者学习专门的移动编程知识技能,还要有比如专门的编码工具(比如专门为iOS系统开发应用的工具),再有就是需要在每一个平台都进行测试部署(如Android,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>
- </head>
首先要注意的是,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框架本身的文件。#p#
编写***个页面
首先给出***个页面,也就是显示菜式列表的页面,如下代码:
- <body>
- <p data-role="page" id="home" data-theme="c">
- <p data-role="content">
- <p id="branding">
- <h1>Restaurant Picker </h1>
- </p>
- <p 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>
- </p>
- </p>
- </p><!-- /page -->
- </body>
- </HTML>
jQuery Mobile和普通的HTML文档页面有一些区别。一个jQuery Mobile的界面中,可以由多个页面组成,每个页面之间使用data-role=“page”来标示,页面之间用anchors锚点进行控制。所以在上面的代码中,使用 <p data-role=”page” id=”home” data-theme=”c”>来设置了data-role属性,并且指定使用的是jQuery Mobile的主题c的预定义样式。
接下来使用data-role=“listview”属性,定义了一个列表,data-insert=true属性指定了列表的样式是一个圆角的列表,并且每个列表项都有一个箭头图标。在列表项中,产生了多个菜式的图片列表项,并且使用
data-transition定义了以幻灯方式跳转到下一页的效果。***我们的效果图如下:
#p#
设计第二个页面:去哪就餐?
接下来,当用户点了喜欢要吃的菜式后,则会跳转到下一页以列表的形式显示能就餐的城镇,代码如下:
- <body>
- <p id="choisir_ville" data-role="page" data-add-back-btn="true">
- <p data-role="header">
- <h1> Restaurant Picker</h1>
- </p>
- <p data-role="content">
- <p 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>
- </p>
- </p>
- </p><!-- /page -->
- </body>
这里我们的页面结构其实跟之前的差别不是太大,首先是设置了新的id(id="choisir_ville"),用来区别***页,并且增加了data-add-back-btn=“true”,这将增加一个回退的按钮,这样可以点这个按钮返回到前一页,
并且这里添加了data-role=“header”中,设置的是页面的头部样式文字。
而在城镇列表中,通过添加了data-filter=“true”,这样当用户在列表框上输入部分字母后,可以立即筛选出其城镇。在列表项的最右方,通过创建一个
<span class>来显示出一个圆圈,其中显示的是这个城镇的餐馆的数量。第二个页面的效果如下图:
#p#
创建第三个页面:选择餐馆
接下来,当进入某个城镇后,可以看到第三个页面,会显示该城镇中有什么餐馆可供选择的,代码如下:
- <body>
- <p id="choisir_restau" data-role="page" data-add-back-btn="true">
- <p data-role="header">
- <h1> Restaurant Picker</h1>
- </p>
- <p data-role="content">
- <p 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> 4 stars </p></a></li>
- <li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau02_mini.jpg "/> <h2> Chocolate bar </h2> <p> 4 stars </p> </a></li>
- <li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau03_mini.jpg "/> <h2> Restaurant Diona</h2> <p> 1 star </p> </a></li>
- <li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau04_mini.jpg "/> <h2> Tai Shan</h2> <p> 3 stars </p> </a></li>
- <li><a href="restaurant.HTML" data-transition="slidedown"> <img src=" restau05_mini.jpg"/> <h2> Arcade</h2> <p> 2 stars </p> </a></li>
- </ul>
- </p>
- </p>
- </p><!-- /page -->
- </body>
这个页面的结构跟***个页面有点象。但这里多了的是每家餐馆的评级。这个评级其实是在CSS中,增加了p元素,并且设置了多个.classement的样式,比如.one,.two,.three等分别代表对应的评级的样式,在本文的稍后,将详细讲解如何应用CSS样式。第三个页面的实际运行效果如下图:
餐馆详细信息
接下来,按前文说的,我们将餐馆的详细信息划分为三个部分,先看代码实现:
- <body>
- <p id="restau" data-role="page" data-add-back-btn="true">
- <p data-role="header">
- <h1> Restaurant Picker</h1>
- </p>
- <p data-role="content">
- <p class="ui-grid-a" id="restau_infos">
- <p 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>
- </p>
- <p 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>
- </p>
- </p><!-- /grid-a -->
- <hr/>
- <p class="ui-grid-a" id="contact_infos">
- <p class="ui-block-a">
- <h2> Contact us</h2>
- <p>30 Rue des Tonneliers</p>
- <p> 67000 Strasbourg </p>
- </p>
- <p class="ui-block-b">
- <img src="01_maps.jpg" alt="plan jeanette"/>
- </p>
- </p><!-- /grid-a -->
- <p 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>
- </p>
- <hr/>
- <p 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>
- </p>
- </p>
- </p><!-- /page -->
- </body>
其运行效果如下图:
对于餐厅的详细信息,我们使用的是jQuery Mobile两列的模板。要创建一个两列的界面 ,我们只需要在上面的代码中,使用ui-block-a,ui-block-b这样的样式即可。而我们在上面的代码中,对于按钮和链接都加上了rel=“external”的设置,也就是让jQuery Mobile不使用ajax方式打开这些链结,而是直接通过浏览器进行打开。
而另外一个值得注意的地方,是在电话和地图的按钮中,通过指定了data-icon=”tel”和data-icon=”maps”来设置了电话和地图的两个按钮图标。而对于google map的这个链接,在有的移动设备上可能无法直接识别,但一般来说,只要安装了google map,则当点这个链接时,会自动调用google map查找出这个地方的具体位置信息。此外,象href=tel:0388161072这样的链接方式,在传统浏览器上是不能运行的,只有在智能手机上运行,当点这个链接时,会自动拨打这个电话。
***一部分是用户评级。为此,我们将使用一个简单的下拉菜单,注意这里使用了
data-native-menu="false"属性设置了可以对下拉菜单的样式进行设置,这里的四个等级,可以看到将使用不同的class样式进行修饰,这个下文中讲解CSS样式是,会看到将使用五角星的样式去进行修饰,而不是自带的jQuery Mobile的样式。
接下来,我们就开始讲解使用CSS样式美化订餐应用
使用自定义CSS样式
要在jQuery Mobile中使用自定义样式的话,可以有两个办法:或者是移除jquery.mobile-1.0.1css,自己重新编写一个,或者是自己增加一些CSS,其中有的部分是复用原来的jQuery Mobile的js。如果要方便的话,可以使用jQuery Mobile提供的主题设计器去进行设计,这将减少很多的工作量。
先来看下,对于全局的CSS的样式设置,如下代码:
- /*** general styling */
- .ui-page.ui-body-c{
- background:url(images/bg.png);
- box-shadow: 0px 0px 30px 5px rgba(107, 105, 105, 0.3) inset,
- 0px 0px 0px 1px rgba(107, 105, 105, 0.4) inset;
- }
- .ui-icon.ui-icon-arrow-r {
- background-color:rgb(136, 111, 110);
- }
- .ui-corner-all,
- .ui-corner-top,
- .ui-corner-bottom,
- .ui-corner-tl,
- .ui-corner-tr,
- .ui-corner-bl,
- .ui-header .ui-btn-corner-all,
- .ui-listview-filter .ui-btn-corner-all,
- #restau_infos .ui-btn-corner-all,
- #contact_buttons .ui-btn-corner-all,
- #notation .ui-btn-corner-all{
- border-radius:0.2em;
- }
- .ui-btn-active {
- background: #654644; /* Old browsers */
- background: -moz-linear-gradient(top, #654644 0%, #331c1b 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#654644), color-stop(100%,#331c1b)); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, #654644 0%,#331c1b 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, #654644 0%,#331c1b 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, #654644 0%,#331c1b 100%); /* IE10+ */
- background: linear-gradient(top, #654644 0%,#331c1b 100%); /* W3C */
- color:#fff !important;
- }
- .ui-content .choice_list .ui-btn-active .ui-link-inherit,
- .ui-btn-down-c a.ui-link-inherit,
- #home .ui-btn-down-c a.ui-link-inherit{
- color:#fff !important;
- }
- img{
- max-width: 100%;
- height: auto; width: auto;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
- .ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b {
- width: 48%;
- padding:1%;
- }
为了在app应用的***屏就能吸引住用户,因此要增加漂亮的logo,下面是我们期望实现的效果图:
设置的CSS如下:
- /*** home **/
- #branding{
- background:url(images/logo.png) no-repeat;
- width:322px;
- height:165px;
- text-indent:-999px;
- font-size:0px;
- margin:-10px auto 0 auto;
- border-bottom:1px solid rgba(65, 38, 37, 0.6);
- }
- .choice_list h1{
- margin-top:30px;
- font-size:18px;
- color:rgb(65, 38, 37);
- font-weight:normal;
- font-style:italic;
- padding:5px 0 6px 50px;
- background:url(images/pagination.png) no-repeat;
- }
- #home .choice_list h1{
- background-position: 0 -16px;
- }
- #home .choice_list h3{
- padding-top:10px;
- color:rgb(63, 41, 39);
- }
- #home .choice_list .ui-btn-active a.ui-link-inherit h3{
- color:#fff;
- }
- .choice_list img{
- padding:3px;
- }
对第二个页面设计的CSS如下:
- /* title bar */
- .ui-header.ui-bar-a{
- background:url(images/header_bg.png);
- }
- .ui-header .ui-title {
- text-indent:-9999px;
- font-size:0px;
- background:url(images/header_logo.png) no-repeat 69% 5px ;
- height:33px;
- padding:5px 0 5px 50px;
- margin:0px;
- }
- .ui-header .ui-btn-up-a {
- background:rgba(255, 255, 255, 0.1);
- box-shadow:none;
- }
- .ui-header .ui-btn-hover-a {
- background:rgba(0, 0, 0, 0.3);
- box-shadow:none;
- }
其运行后的效果如下图:
第三个页面中的选择餐厅的效果图如下:
CSS如下:
- /** choix du restaurant **/
- #choisir_restau .choice_list h1{
- background-position: 0 -132px;
- margin:10px auto 20px auto;
- }
- #choisir_restau .choice_list a{
- padding-top:10px;
- color:rgb(63, 41, 39);
- }
- #choisir_restau .classement{
- display:inline-bloc;
- background:url(images/pagination.png) no-repeat 0 -182px;
- height:22px;
- text-indent:-999px;
- font-size:0px;
- }
- #choisir_restau .one{
- width:30px;
- }
- #choisir_restau .two{
- width:55px;
- }
- #choisir_restau .three{
- width:75px;
- }
- #choisir_restau .four{
- width:99px;
- }
这里,可以看到.one,.two,.three,.four都是之前说到的,对餐厅评分等级时所用到的CSS。
***一页中的关于餐厅详细信息的页面效果,如下图:
其具体的css代码请参考附件中的下载文件。这里值得一提的是,在附件文件中的addstarscript.js中,其代码为:
- $( '#restau' ).live( 'pageinit',function(event){
- var SelectedOptionClass = $('option:selected').attr('class');
- $('p.ui-select').addClass(SelectedOptionClass);
- $('#note_utilisateur').live('change', function(){
- $('p.ui-select').removeClass(SelectedOptionClass);
- SelectedOptionClass = $('option:selected').attr('class');
- $('p.ui-select').addClass(SelectedOptionClass);
- });
其含义为当用户点击评分的下拉菜单时,将会弹出等级评分的窗口(如上图中的Not good at all,Average等),当用户选择了某个评分等级后,jQuery Mobile的change事件中将用户所选择的等级的CSS加载到页面中显示(也就是显示用户所选择等级的星星数目),同时关闭掉弹出的等级选择窗口。
***,为了能适应在iOs设备上可以创建桌面的快捷方式,一个好的体验是创建对应的不同尺寸的小图标,如下:
- <link rel="apple-touch-icon" href="images/launch_icon_57.png" />
- <link rel="apple-touch-icon" sizes="72x72" href="images/launch_icon_72.png" />
- <link rel="apple-touch-icon" sizes="114x114" href="images/launch_icon_114.png" />
小结
在本文中,带领大家初步体验了如何使用jQuery Mobile编写了一个简单的订餐应用,读者可以从中体验到其中的编程方法,也可以根据实际进行适当的扩展。