zoukankan      html  css  js  c++  java

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

    从零开始创建移动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如下图：

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

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

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

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

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

    餐厅的详细信息界面是由三部分组成：餐厅详细资料，联系方式，用户的评级打分。首先在最上部，是餐厅的简单介绍，包括了图片和链接。而第二部分的联 系信息，则显示了餐馆的地址，还包括一个调用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定义了以幻灯方式跳转到下一页的效果。最后我们的效果图如下：

       

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

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

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

        

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

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

    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(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- 100%;  
    80.  
    81. height: auto;  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.  48%;  
    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. 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.  

    其运行后的效果如下图：

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

       

    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. 30px;  
    36.  
    37. }  
    38.  
    39. #choisir_restau .two{  
    40.  
    41. 55px;  
    42.  
    43. }  
    44.  
    45. #choisir_restau .three{  
    46.  
    47. 75px;  
    48.  
    49. }  
    50.  
    51. #choisir_restau .four{  
    52.  
    53. 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编写了一个简单的订餐应用，读者可以从中体验到其中的编程方法，也可以根据实际进行适当的扩展。

    【编辑推荐】

     
     
  • 相关阅读:
    docker入门
    IAR屏蔽警告的方法
    在MDK 中忽略（suppress） 某一个警告
    stm32 F40x CCM数据区的使用
    如何理解Stand SPI Dual SPI 和Quad SPI??
    stm32F1在sram中调试运行代码
    stm32低功耗的一点总结
    C语言中__attribute__ ((at())绝对定位的应用
    系统栈和任务栈——freertos
    软件模拟spi的注意事项
  • 原文地址：https://www.cnblogs.com/dashafa/p/3818942.html
Copyright © 2011-2022 走看看