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

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

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

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

AD:

设计第二个页面:去哪就餐?

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

  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 页:第二个页面  第 4 页:第三个页面及总结



分享到:

热点职位

更多>>

热点专题

更多>>

读书

超级网管员——网络管理
本书全面深入地介绍了在网络的日常管理中,网络管理员必须掌握的知识,包括系统基本管理、性能调优、故障恢复、域控制器管理、存

51CTO旗下网站

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