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

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

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

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

AD:

创建第三个页面:选择餐馆

接下来,当进入某个城镇后,可以看到第三个页面,会显示该城镇中有什么餐馆可供选择的,代码如下:

  1.  
  2.  
  3.     <body> 
  4.  
  5. <p id="choisir_restau" data-role="page" data-add-back-btn="true"> 
  6.  
  7. <p data-role="header"> 
  8.  
  9. <h1> Restaurant Picker</h1> 
  10.  
  11. </p> 
  12.  
  13. <p data-role="content"> 
  14.  
  15. <p class="choice_list"> 
  16.  
  17. <h1> Please choose a restaurant.</h1> 
  18.  
  19. <ul data-role="listview" data-inset="true" > 
  20.  
  21. <li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau01_mini.jpg"/> <h2> Le Mouffetard</h2> <p> 4 stars </p></a></li> 
  22.  
  23. <li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau02_mini.jpg "/> <h2> Chocolate bar </h2> <p> 4 stars </p> </a></li> 
  24.  
  25. <li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau03_mini.jpg "/> <h2> Restaurant Diona</h2> <p> 1 star </p> </a></li> 
  26.  
  27. <li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau04_mini.jpg "/> <h2> Tai Shan</h2> <p> 3 stars </p> </a></li> 
  28.  
  29. <li><a href="restaurant.HTML" data-transition="slidedown"> <img src=" restau05_mini.jpg"/> <h2> Arcade</h2> <p> 2 stars </p> </a></li> 
  30.  
  31. </ul> 
  32.  
  33. </p> 
  34.  
  35. </p> 
  36.  
  37. </p><!-- /page --> 
  38.  
  39. </body> 
  40.  

这个页面的结构跟第一个页面有点象。但这里多了的是每家餐馆的评级。这个评级其实是在CSS中,增加了p元素,并且设置了多个.classement的样式,比如.one,.two,.three等分别代表对应的评级的样式,在本文的稍后,将详细讲解如何应用CSS样式。第三个页面的实际运行效果如下图:

   

餐馆详细信息

接下来,按前文说的,我们将餐馆的详细信息划分为三个部分,先看代码实现:

  1.  
  2.  
  3. <body> 
  4.  
  5. <p id="restau" data-role="page" data-add-back-btn="true"> 
  6.  
  7. <p data-role="header"> 
  8.  
  9. <h1> Restaurant Picker</h1> 
  10.  
  11. </p>   
  12.  
  13. <p data-role="content"> 
  14.  
  15. <p class="ui-grid-a" id="restau_infos"> 
  16.  
  17. <p class="ui-block-a"> 
  18.  
  19. <h1> Le Mouffetard</h1> 
  20.  
  21. <p><strong>  Restaurant bar in the center of Strasbourg</strong></p> 
  22.  
  23. <p> On the menu: </p> 
  24.  
  25. <ul> 
  26.  
  27. <li> Milkshake with chocolat</li> 
  28.  
  29. <li> Planchettes </li> 
  30.  
  31. <li> Leek pie </li> 
  32.  
  33. </ul> 
  34.  
  35. </p> 
  36.  
  37. <p class="ui-block-b"> 
  38.  
  39. <p><img src="restau01.jpg" alt="jeannette photo"/></p> 
  40.  
  41. <p><a href="http://www.google.fr" rel="external" data-role="button"> See our website</a></p> 
  42.  
  43. </p> 
  44.  
  45. </p><!-- /grid-a --> 
  46.  
  47. <hr/> 
  48.  
  49. <p class="ui-grid-a" id="contact_infos"> 
  50.  
  51. <p class="ui-block-a"> 
  52.  
  53. <h2> Contact us</h2> 
  54.  
  55. <p>30 Rue des Tonneliers</p> 
  56.  
  57. <p> 67000 Strasbourg </p> 
  58.  
  59. </p> 
  60.  
  61. <p class="ui-block-b"> 
  62.  
  63. <img src="01_maps.jpg" alt="plan jeanette"/> 
  64.  
  65. </p> 
  66.  
  67. </p><!-- /grid-a --> 
  68.  
  69. <p id="contact_buttons"> 
  70.  
  71. <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> 
  72.  
  73. <a href="tel:0388161072"  data-role="button" data-icon="tel"> Call us </a> 
  74.  
  75. </p> 
  76.  
  77. <hr/> 
  78.  
  79. <p id="notation"> 
  80.  
  81. <form> 
  82.  
  83. <label for="select-choice-0" class="select"><h2> User rating </h2></label> 
  84.  
  85. <select name="note_utilisateur" id="note_utilisateur" data-native-menu="false" data-theme="c" > 
  86.  
  87.    <option value="one" class="one"> Not good at all </option> 
  88.  
  89.    <option value="two" class="two">Average </option> 
  90.  
  91.    <option value="three" class="three">Pretty good </option> 
  92.  
  93.    <option value="four" class="four"> Excellent </option> 
  94.  
  95. </select> 
  96.  
  97. </form> 
  98.  
  99. </p> 
  100.  
  101. </p> 
  102.  
  103. </p><!-- /page --> 
  104.  
  105. </body> 
  106.  

其运行效果如下图:

  

对于餐厅的详细信息,我们使用的是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的样式设置,如下代码:

  1.  
  2.  
  3.  /*** general styling */ 
  4.  
  5. .ui-page.ui-body-c{  
  6.  
  7. background:url(images/bg.png);  
  8.  
  9. box-shadow: 0px 0px 30px 5px rgba(1071051050.3inset,  
  10.  
  11. 0px 0px 0px 1px rgba(1071051050.4inset;  
  12.  
  13. }  
  14.  
  15. .ui-icon.ui-icon-arrow-r {  
  16.  
  17. background-color:rgb(136111110);  
  18.  
  19. }  
  20.  
  21. .ui-corner-all,  
  22.  
  23. .ui-corner-top,  
  24.  
  25. .ui-corner-bottom,  
  26.  
  27. .ui-corner-tl,  
  28.  
  29. .ui-corner-tr,  
  30.  
  31. .ui-corner-bl,  
  32.  
  33. .ui-header .ui-btn-corner-all,  
  34.  
  35. .ui-listview-filter .ui-btn-corner-all,  
  36.  
  37. #restau_infos .ui-btn-corner-all,  
  38.  
  39. #contact_buttons .ui-btn-corner-all,  
  40.  
  41. #notation .ui-btn-corner-all{  
  42.  
  43. border-radius:0.2em;  
  44.  
  45. }  
  46.  
  47. .ui-btn-active {  
  48.  
  49. background#654644/* Old browsers */ 
  50.  
  51. background: -moz-linear-gradient(top#654644 0%, #331c1b 100%); /* FF3.6+ */ 
  52.  
  53. background: -webkit-gradient(linear, left topleft bottom, color-stop(0%,#654644), color-stop(100%,#331c1b)); /* Chrome,Safari4+ */ 
  54.  
  55. background: -webkit-linear-gradient(top#654644 0%,#331c1b 100%); /* Chrome10+,Safari5.1+ */ 
  56.  
  57. background: -o-linear-gradient(top#654644 0%,#331c1b 100%); /* Opera 11.10+ */ 
  58.  
  59. background: -ms-linear-gradient(top#654644 0%,#331c1b 100%); /* IE10+ */ 
  60.  
  61. background: linear-gradient(top#654644 0%,#331c1b 100%); /* W3C */ 
  62.  
  63. color:#fff !important;  
  64.  
  65. }  
  66.  
  67. .ui-content .choice_list .ui-btn-active .ui-link-inherit,  
  68.  
  69. .ui-btn-down-c a.ui-link-inherit,  
  70.  
  71. #home .ui-btn-down-c a.ui-link-inherit{  
  72.  
  73. color:#fff !important;  
  74.  
  75. }  
  76.  
  77. img{  
  78.  
  79. max-width100%;  
  80.  
  81. heightautowidthauto;  
  82.  
  83. -webkit-box-sizing: border-box;  
  84.  
  85. -moz-box-sizing: border-box;  
  86.  
  87. box-sizing: border-box;  
  88.  
  89. }  
  90.  
  91. .ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b {  
  92.  
  93. width48%;  
  94.  
  95. padding:1%;  
  96.  
  97. }  
  98.  

为了在app应用的第一屏就能吸引住用户,因此要增加漂亮的logo,下面是我们期望实现的效果图:

  

设置的CSS如下:

  1.       /*** home **/ 
  2.  
  3. #branding{  
  4.  
  5. background:url(images/logo.png) no-repeat;  
  6.  
  7. width:322px;  
  8.  
  9. height:165px;  
  10.  
  11. text-indent:-999px;  
  12.  
  13. font-size:0px;  
  14.  
  15. margin:-10px auto 0 auto;  
  16.  
  17. border-bottom:1px solid rgba(6538370.6);  
  18.  
  19. }  
  20.  
  21. .choice_list h1{  
  22.  
  23. margin-top:30px;  
  24.  
  25. font-size:18px;  
  26.  
  27. color:rgb(653837);  
  28.  
  29. font-weight:normal;  
  30.  
  31.  font-style:italic;  
  32.  
  33. padding:5px 0 6px 50px;  
  34.  
  35. background:url(images/pagination.png) no-repeat;  
  36.  
  37. }  
  38.  
  39. #home .choice_list h1{  
  40.  
  41. background-position0 -16px;  
  42.  
  43. }  
  44.  
  45.  #home .choice_list h3{  
  46.  
  47.  padding-top:10px;  
  48.  
  49. color:rgb(634139);  
  50.  
  51. }  
  52.  
  53. #home .choice_list .ui-btn-active a.ui-link-inherit h3{  
  54.  
  55.  color:#fff;  
  56.  
  57. }  
  58.  
  59. .choice_list img{  
  60.  
  61. padding:3px;  
  62.  
  63. }  
  64.  

对第二个页面设计的CSS如下:

  1.  
  2.  
  3. /* title bar */ 
  4.  
  5. .ui-header.ui-bar-a{  
  6.  
  7. background:url(images/header_bg.png);  
  8.  
  9. }  
  10.  
  11. .ui-header .ui-title {  
  12.  
  13. text-indent:-9999px;  
  14.  
  15. font-size:0px;  
  16.  
  17. background:url(images/header_logo.png) no-repeat 69% 5px ;  
  18.  
  19. height:33px;  
  20.  
  21. padding:5px 0 5px 50px;  
  22.  
  23. margin:0px;  
  24.  
  25. }  
  26.  
  27. .ui-header  .ui-btn-up-a  {  
  28.  
  29. background:rgba(2552552550.1);  
  30.  
  31. box-shadow:none;  
  32.  
  33. }  
  34.  
  35. .ui-header  .ui-btn-hover-a {  
  36.  
  37. background:rgba(0000.3);  
  38.  
  39. box-shadow:none;  
  40.  
  41. }  
  42.  

其运行后的效果如下图:

第三个页面中的选择餐厅的效果图如下:

   

CSS如下:

  1.    /** choix du restaurant **/ 
  2.  
  3. #choisir_restau .choice_list h1{  
  4.  
  5. background-position0 -132px;  
  6.  
  7. margin:10px auto 20px auto;  
  8.  
  9. }  
  10.  
  11. #choisir_restau .choice_list a{  
  12.  
  13. padding-top:10px;  
  14.  
  15. color:rgb(634139);  
  16.  
  17. }  
  18.  
  19. #choisir_restau .classement{  
  20.  
  21. display:inline-bloc;  
  22.  
  23. background:url(images/pagination.png) no-repeat 0 -182px;  
  24.  
  25. height:22px;  
  26.  
  27. text-indent:-999px;  
  28.  
  29. font-size:0px;  
  30.  
  31. }  
  32.  
  33. #choisir_restau .one{  
  34.  
  35. width:30px;  
  36.  
  37. }  
  38.  
  39. #choisir_restau .two{  
  40.  
  41. width:55px;  
  42.  
  43. }  
  44.  
  45. #choisir_restau .three{  
  46.  
  47. width:75px;  
  48.  
  49. }  
  50.  
  51. #choisir_restau .four{  
  52.  
  53. width:99px;  
  54.  
  55. }  

这里,可以看到.one,.two,.three,.four都是之前说到的,对餐厅评分等级时所用到的CSS。

最后一页中的关于餐厅详细信息的页面效果,如下图:

   

其具体的css代码请参考附件中的下载文件。这里值得一提的是,在附件文件中的addstarscript.js中,其代码为:

  1. $( '#restau' ).live( 'pageinit',function(event){  
  2.  
  3. var SelectedOptionClass = $('option:selected').attr('class');  
  4.  
  5. $('p.ui-select').addClass(SelectedOptionClass);  
  6.  
  7. $('#note_utilisateur').live('change', function(){  
  8.  
  9.   $('p.ui-select').removeClass(SelectedOptionClass);  
  10.  
  11.   SelectedOptionClass = $('option:selected').attr('class');  
  12.  
  13. $('p.ui-select').addClass(SelectedOptionClass);  
  14.  
  15. });  
  16.  

其含义为当用户点击评分的下拉菜单时,将会弹出等级评分的窗口(如上图中的Not good at all,Average等),当用户选择了某个评分等级后,jQuery Mobile的change事件中将用户所选择的等级的CSS加载到页面中显示(也就是显示用户所选择等级的星星数目),同时关闭掉弹出的等级选择窗口。

最后,为了能适应在iOs设备上可以创建桌面的快捷方式,一个好的体验是创建对应的不同尺寸的小图标,如下:

  1.   <link rel="apple-touch-icon" href="images/launch_icon_57.png" /> 
  2.  
  3. <link rel="apple-touch-icon" sizes="72x72" href="images/launch_icon_72.png" /> 
  4.  
  5. <link rel="apple-touch-icon" sizes="114x114" href="images/launch_icon_114.png" /> 

小结

在本文中,带领大家初步体验了如何使用jQuery Mobile编写了一个简单的订餐应用,读者可以从中体验到其中的编程方法,也可以根据实际进行适当的扩展。

【编辑推荐】

  1. 使用jQuery Mobile和CSS3实现响应式设计
  2. 使用jQuery Mobile框架将博客快速转化为Mobile网站
  3. jQuery Mobile十大常用技巧
【责任编辑:立方 TEL:(010)68476606】

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



分享到:

热点职位

更多>>

热点专题

更多>>

读书

精通JavaScript动态网页编程(实例版)
本书通过大量实例代码,以ECMA-262版本3为基础,结合JavaScript 1.5和JavaScript 5.5,由浅入深、循序渐进地介绍了JavaScript知

51CTO旗下网站

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