android PhoneGap JQuery Mobile Demo

最终效果：

项目目录结构图：

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/

android PhoneGap JQuery Mobile Demo

相关推荐