码迷，mamicode.com
首页 > 移动开发 > 详细

web app开发——使用jQuery Mobile创建餐厅订餐应用

时间：2014-07-02 22:21:06      阅读：4402      评论：0      收藏：0      [点我收藏+]

标签：des   style   blog   http   java   color   

从零开始创建移动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基础的用户。

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

防止丢失，代码放了一份在我的网盘：http://pan.baidu.com/share/link?shareid=124587&uk=52813371

应用概述

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

 设计构图

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

bubuko.com,布布扣

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

bubuko.com,布布扣

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

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

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

bubuko.com,布布扣

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

bubuko.com,布布扣

餐厅的详细信息界面是由三部分组成：餐厅详细资料，联系方式，用户的评级打分。首先在最上部，是餐厅的简单介绍，包括了图片和链接。而第二部分的联 系信息，则显示了餐馆的地址，还包括一个调用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.    <body> 
  2.  
  3. <p data-role="page" id="home" data-theme="c"> 
  4.  
  5. <p data-role="content"> 
  6.  
  7. <p id="branding"> 
  8.  
  9. <h1>Restaurant Picker </h1> 
  10.  
  11. </p> 
  12.  
  13. <p class="choice_list"> 
  14.  
  15. <h1> What would you‘d like to eat? </h1> 
  16.  
  17. <ul data-role="listview" data-inset="true" > 
  18.  
  19. <li><a href="choose_town.HTML" data-transition="slidedown"> <img src="sushis.jpg"/> <h3> Some Sushis</h3></a></li> 
  20.  
  21. <li><a href="choose_town.HTML" data-transition="slidedown"> <img src="pizza.jpg"/> <h3> A Pizza </h3></a></li> 
  22.  
  23. <li><a href="choose_town.HTML" data-transition="slidedown"> <img src="kebap.jpg"/> <h3> A Kebap</h3></a></li> 
  24.  
  25. <li><a href="choose_town.HTML" data-transition="slidedown"> <img src="burger.jpg"/> <h3> A Burger</h3></a></li> 
  26.  
  27. <li><a href="choose_town.HTML" data-transition="slidedown"> <img src="nems.jpg"/> <h3> Some Nems </h3></a></li> 
  28.  
  29. <li><a href="choose_town.HTML" data-transition="slidedown"> <img src="tradi.jpg"/> <h3> Something more traditional</h3></a></li> 
  30.  
  31. </ul> 
  32.  
  33. </p> 
  34.  
  35. </p> 
  36.  
  37. </p><!-- /page --> 
  38.  
  39. </body> 
  40.  
  41. </HTML> 
  42.  

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定义了以幻灯方式跳转到下一页的效果。最后我们的效果图如下：

   bubuko.com,布布扣

设计第二个页面：去哪就餐？

接下来，当用户点了喜欢要吃的菜式后，则会跳转到下一页以列表的形式显示能就餐的城镇，代码如下：

  1.  
  2.  
  3.    <body> 
  4.  
  5. <p id="choisir_ville" 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> In which town do you want to eat? </h1> 
  18.  
  19. <ul data-role="listview" data-inset="true" data-filter="true" > 
  20.  
  21. <li><a href="choose_restaurant.HTML" data-transition="slidedown"> Amiens <span > 3 </span></a> </li> 
  22.  
  23. <li><a href="choose_restaurant.HTML" data-transition="slidedown"> Bastia <span > 2 </span></a> </li> 
  24.  
  25. <li><a href="choose_restaurant.HTML" data-transition="slidedown"> Belfort <span class="ui-li-count" > 5 </span></a> </li> 
  26.  
  27. <li><a href="choose_restaurant.HTML" data-transition="slidedown"> Bordeaux <span class="ui-li-count" > 1</span></a> </li> 
  28.  
  29. …  
  30.  
  31. </ul> 
  32.  
  33. </p> 
  34.  
  35. </p> 
  36.  
  37. </p><!-- /page --> 
  38.  
  39. </body> 
  40.  
  41.         

这里我们的页面结构其实跟之前的差别不是太大，首先是设置了新的id(id="choisir_ville"）,用来区别第一页，并且增加了data-add-back-btn＝“true”，这将增加一个回退的按钮，这样可以点这个按钮返回到前一页，

并且这里添加了data-role=“header”中，设置的是页面的头部样式文字。

而在城镇列表中，通过添加了data-filter=“true”，这样当用户在列表框上输入部分字母后，可以立即筛选出其城镇。在列表项的最右方，通过创建一个

<span class>来显示出一个圆圈，其中显示的是这个城镇的餐馆的数量。第二个页面的效果如下图：

    bubuko.com,布布扣

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

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

  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样式。第三 个页面的实际运行效果如下图：

   bubuko.com,布布扣

餐馆详细信息

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

  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.  

其运行效果如下图：

  bubuko.com,布布扣

对于餐厅的详细信息，我们使用的是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(107, 105, 105, 0.3) inset,  
  10.  
  11. 0px 0px 0px 1px rgba(107, 105, 105, 0.4) inset;  
  12.  
  13. }  
  14.  
  15. .ui-icon.ui-icon-arrow-r {  
  16.  
  17. background-color:rgb(136, 111, 110);  
  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 top, left 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-width: 100%;  
  80.  
  81. height: auto; width: auto;  
  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. width: 48%;  
  94.  
  95. padding:1%;  
  96.  
  97. }  
  98.  

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

  bubuko.com,布布扣

设置的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(65, 38, 37, 0.6);  
  18.  
  19. }  
  20.  
  21. .choice_list h1{  
  22.  
  23. margin-top:30px;  
  24.  
  25. font-size:18px;  
  26.  
  27. color:rgb(65, 38, 37);  
  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-position: 0 -16px;  
  42.  
  43. }  
  44.  
  45.  #home .choice_list h3{  
  46.  
  47.  padding-top:10px;  
  48.  
  49. color:rgb(63, 41, 39);  
  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(255, 255, 255, 0.1);  
  30.  
  31. box-shadow:none;  
  32.  
  33. }  
  34.  
  35. .ui-header  .ui-btn-hover-a {  
  36.  
  37. background:rgba(0, 0, 0, 0.3);  
  38.  
  39. box-shadow:none;  
  40.  
  41. }  
  42.  

其运行后的效果如下图：

bubuko.com,布布扣

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

   bubuko.com,布布扣

CSS如下：

  1.    /** choix du restaurant **/ 
  2.  
  3. #choisir_restau .choice_list h1{  
  4.  
  5. background-position: 0 -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(63, 41, 39);  
  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。

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

   bubuko.com,布布扣

其具体的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编写了一个简单的订餐应用，读者可以从中体验到其中的编程方法，也可以根据实际进行适当的扩展。

【编辑推荐】

 
 

 


web app开发——使用jQuery Mobile创建餐厅订餐应用,布布扣,bubuko.com

web app开发——使用jQuery Mobile创建餐厅订餐应用

标签：des   style   blog   http   java   color   

原文地址：http://www.cnblogs.com/dashafa/p/3818942.html
踩
(0)
赞
(1)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！