android PhoneGap JQuery Mobile Demo

最终效果：

项目目录结构图：

主要核心文件：

index.html:

<!DOCTYPE HTML><html><head><title>PhoneGap——jqm</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link rel="stylesheet" href="../css/jquery.mobile-1.1.0.min.css"><script type="text/javascript" charset="utf-8" src="../js/jquery-1.7.1.js"></script><script type="text/javascript" charset="utf-8" src="../js/jquery.mobile-1.1.0.min.js"></script><script type="text/javascript" charset="utf-8" src="../js/phonegap.js"></script><script type="text/javascript">$(function() {var go_about = function() {//滑动效果默认slide:从右到左滑动，slideup:从下到上滑动，slidedown:从上到下滑动$.mobile.changePage("about.html", {transition : "slide"});}$('#btn_about').bind('click', go_about);});</script></head><body><!-- 更多页面 --><div data-role="page" id="div_more"><div data-role="header"><h1>首页</h1></div><div data-role="content"><p>请选择：</p><p><a href="#div_menu">菜单</a></p><p><a href="http://www.baidu.com" rel="external">百度</a></p> <button id="btn_about">关于</button><a href="dialog.html" data-rel="dialog" data-role="button">对话框</a> </div></div><!-- 菜单页面 --><div data-role="page" id="div_menu"><div data-role="header"><h1>菜单</h1></div><div data-role="content"><ul data-role="listview"><li data-role="list-divider">魏国</li><li>曹操</li>         <li>司马懿</li>         <li>夏侯惇</li>         <li data-role="list-divider">蜀国</li><li>刘备</li>         <li>诸葛亮</li>         <li>关云长</li>         <li data-role="list-divider">吴国</li><li>孙权</li>         <li>周公瑾</li>         <li>太史慈</li></ul></div><div data-role="footer"><h4>版权所有</h4></div></div></body></html>

dialog.html:

<!DOCTYPE HTML><html><head><title>dialog</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head><body><div data-role="page"><div data-role="header">      <h1>对话框</h1>   </div>   <div data-role="content">话说天下大势分久必合，合久必分。</div></div></body></html>

参考：http://www.cnblogs.com/filod/archive/2011/08/15/2135399.html

jquery mobile download:http://jquerymobile.com/download/

更多相关文章

随机推荐