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

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

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

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

AD:

编写第一个页面

首先给出第一个页面,也就是显示菜式列表的页面,如下代码:

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



分享到:

热点职位

更多>>

热点专题

更多>>

读书

JSP应用开发详解(第二版)
本书结合JSP和Servlet的最新规范,从基本的语法和规范入手,以经验为后盾,以实用为目标,以实例为导向,以实践为指导,深入浅出

51CTO旗下网站

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