`
萧_瑟
  • 浏览: 160547 次
社区版块
存档分类
最新评论

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/

  • 大小: 12.8 KB
  • 大小: 17.7 KB
  • 大小: 12.3 KB
  • 大小: 24.1 KB
分享到:
评论

相关推荐

    phoneGap jqueryMobile demo

    在"phoneGap jqueryMobile demo"这个项目中,SmartHome可能是示例应用的名字,可能包含了一系列使用PhoneGap和jQuery Mobile创建的文件,用于展示如何将两者结合使用来开发一个智能家居控制应用。开发者可能使用HTML...

    android+phonegap+jquery mobile

    【标题】:“Android + PhoneGap + jQuery Mobile” 这个项目标题揭示了一个使用三种技术栈构建的移动应用程序:Android、PhoneGap和jQuery Mobile。Android是Google主导的开源操作系统,主要用于智能手机和平板...

    PhoneGap+jQueryMobile开发Android应用实例

    PhoneGap+jQueryMobile开发Android应用实例,搭建开发环境

    PhoneGap+Jquery mobile

    PhoneGap和jQuery Mobile是两种非常重要的移动应用开发技术,它们结合使用可以构建跨平台的混合应用程序。PhoneGap是由Adobe开发的一个开源框架,它允许开发者使用HTML、CSS和JavaScript来创建原生的移动应用,而...

    android phonegao jquery mobile条码扫描例子源码

    这个源码示例提供了完整的流程,包括PhoneGap应用结构、jQuery Mobile的Web页面、以及与ZXing交互的Java插件,可以帮助开发者快速理解和实践在Android PhoneGap应用中实现条码扫描功能。通过学习和研究这个例子,...

    用PhoneGap+jQueryMobile开发Android应用实例

    用PhoneGap+jQueryMobile开发Android应用实例,很好的android开发学习教材。

    html5讲义-整合phonegap和jquery mobile

    整合PhoneGap和jQuery Mobile可以更快地开发出跨平台的移动应用,因为可以利用PhoneGap的跨平台部署能力,以及jQuery Mobile的响应式设计和界面元素。 5. 示例参考 文档中提到了几个快速整合PhoneGap和jQuery ...

    phonegap+jqueryMobile例子

    在这个“phonegap+jqueryMobile例子”中,我们将深入探讨这两个工具如何协同工作,以及如何利用它们创建Android应用程序。 PhoneGap是一个开源框架,它允许开发者使用HTML、CSS和JavaScript来构建原生的移动应用。...

    PhoneGap+Jquery mobile汇率计算器

    PhoneGap和jQuery Mobile是开发移动应用的两个重要工具,它们结合使用可以构建跨平台的、交互性强的移动应用。在本实例中,我们将探讨如何利用这两个技术创建一个汇率计算器。 PhoneGap是一个开源框架,它允许...

    Android JqueryMobile PhoneGap 项目实例

    Android+Jquerymobile+PhoneGap的项目实例,包括 用这些 js UI实现的 滑屏、触摸、禁横屏、滚动特效。绝对经典,技术绝对齐全, 绝对适合你学习。想学手机软件开发的人,必须选择我的资源, 与我一起进步!!!

    Html5 phonegap结合Jquerymobile资源

    HTML5、PhoneGap和jQuery Mobile是移动应用开发中的三大核心技术,它们共同构建了跨平台的移动应用程序。HTML5是下一代超文本标记语言,提供了许多增强的网页交互功能;PhoneGap是一个开源框架,允许开发者使用Web...

    jQuery Mobile快速入门完整版.pdf + 所有源码

    通过本书的学习,读者将会获悉jQuery Mobile的核心特性,以及如何创建可主题化的设计,还会掌握jQuery Mobile的API,以及如何使用PhoneGap来扩展jQuery Mobile。 《jQuery Mobile快速入门》适合想要掌握jQuery ...

    Android PhoneGap实例

    Android PhoneGap实例是这个技术在Android平台上的具体应用,结合了Jquery Mobile这一强大的前端框架,为开发人员提供了一种高效、便捷的方式来创建原生感的移动应用。 PhoneGap的核心理念是“Write Once, Run ...

    【叨、校长】PhoneGap+jQuery Mobile+Rest 访问远程数据

    PhoneGap+jQuery Mobile+REST 访问远程数据 在移动应用开发中,PhoneGap是一个流行的框架,它允许开发者使用HTML、CSS和JavaScript来构建跨平台的原生移动应用。jQuery Mobile则是一个专为触摸设备设计的前端框架,...

    使用jQuery Mobile + PhoneGap 开发Android应用程序

    使用jQuery Mobile + PhoneGap 开发Android应用程序

    PhoneGap与android交互及 JQuery Mobile+ iscroll 列表滚动条的实现

    总的来说,这个主题涵盖了多个技术点,包括PhoneGap的跨平台开发、Android API的调用、JQuery Mobile的UI设计和iScroll的性能优化。学习和掌握这些技术可以帮助开发者构建功能丰富的、具有原生感的移动应用,同时...

    jquerymobile开发android应用整套框架

    没分下载东西了,只好卖我的经典代码了,以下是我通过html5做的多个跨平台应用的demo框架:使用 phonegap 开发android应用框架结构 前台页面用jquery mobile开发,后台用axis2开发实现webservice,前后台用js发送...

    jquery mobile + 百度地图 + phonegap 写的一个\"校园助手\"的app

    《构建“校园助手”App:jQuery Mobile、百度地图与PhoneGap的融合应用》 在现代移动互联网技术中,开发一款跨平台的移动应用程序已经成为常态。本项目“校园助手”利用了jQuery Mobile、百度地图API以及PhoneGap这...

    phonegap android demo

    PhoneGap Android Demo是一个基于PhoneGap框架的Android应用示例,旨在帮助开发者理解如何在Android平台上使用PhoneGap技术来构建跨平台的移动应用。PhoneGap是一个开源的开发框架,它允许开发者使用HTML、CSS和...

Global site tag (gtag.js) - Google Analytics