最终效果:
项目目录结构图:
主要核心文件:
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"这个项目中,SmartHome可能是示例应用的名字,可能包含了一系列使用PhoneGap和jQuery Mobile创建的文件,用于展示如何将两者结合使用来开发一个智能家居控制应用。开发者可能使用HTML...
【标题】:“Android + PhoneGap + jQuery Mobile” 这个项目标题揭示了一个使用三种技术栈构建的移动应用程序:Android、PhoneGap和jQuery Mobile。Android是Google主导的开源操作系统,主要用于智能手机和平板...
PhoneGap+jQueryMobile开发Android应用实例,搭建开发环境
PhoneGap和jQuery Mobile是两种非常重要的移动应用开发技术,它们结合使用可以构建跨平台的混合应用程序。PhoneGap是由Adobe开发的一个开源框架,它允许开发者使用HTML、CSS和JavaScript来创建原生的移动应用,而...
这个源码示例提供了完整的流程,包括PhoneGap应用结构、jQuery Mobile的Web页面、以及与ZXing交互的Java插件,可以帮助开发者快速理解和实践在Android PhoneGap应用中实现条码扫描功能。通过学习和研究这个例子,...
用PhoneGap+jQueryMobile开发Android应用实例,很好的android开发学习教材。
整合PhoneGap和jQuery Mobile可以更快地开发出跨平台的移动应用,因为可以利用PhoneGap的跨平台部署能力,以及jQuery Mobile的响应式设计和界面元素。 5. 示例参考 文档中提到了几个快速整合PhoneGap和jQuery ...
在这个“phonegap+jqueryMobile例子”中,我们将深入探讨这两个工具如何协同工作,以及如何利用它们创建Android应用程序。 PhoneGap是一个开源框架,它允许开发者使用HTML、CSS和JavaScript来构建原生的移动应用。...
PhoneGap和jQuery Mobile是开发移动应用的两个重要工具,它们结合使用可以构建跨平台的、交互性强的移动应用。在本实例中,我们将探讨如何利用这两个技术创建一个汇率计算器。 PhoneGap是一个开源框架,它允许...
Android+Jquerymobile+PhoneGap的项目实例,包括 用这些 js UI实现的 滑屏、触摸、禁横屏、滚动特效。绝对经典,技术绝对齐全, 绝对适合你学习。想学手机软件开发的人,必须选择我的资源, 与我一起进步!!!
HTML5、PhoneGap和jQuery Mobile是移动应用开发中的三大核心技术,它们共同构建了跨平台的移动应用程序。HTML5是下一代超文本标记语言,提供了许多增强的网页交互功能;PhoneGap是一个开源框架,允许开发者使用Web...
通过本书的学习,读者将会获悉jQuery Mobile的核心特性,以及如何创建可主题化的设计,还会掌握jQuery Mobile的API,以及如何使用PhoneGap来扩展jQuery Mobile。 《jQuery Mobile快速入门》适合想要掌握jQuery ...
Android PhoneGap实例是这个技术在Android平台上的具体应用,结合了Jquery Mobile这一强大的前端框架,为开发人员提供了一种高效、便捷的方式来创建原生感的移动应用。 PhoneGap的核心理念是“Write Once, Run ...
PhoneGap+jQuery Mobile+REST 访问远程数据 在移动应用开发中,PhoneGap是一个流行的框架,它允许开发者使用HTML、CSS和JavaScript来构建跨平台的原生移动应用。jQuery Mobile则是一个专为触摸设备设计的前端框架,...
使用jQuery Mobile + PhoneGap 开发Android应用程序
总的来说,这个主题涵盖了多个技术点,包括PhoneGap的跨平台开发、Android API的调用、JQuery Mobile的UI设计和iScroll的性能优化。学习和掌握这些技术可以帮助开发者构建功能丰富的、具有原生感的移动应用,同时...
没分下载东西了,只好卖我的经典代码了,以下是我通过html5做的多个跨平台应用的demo框架:使用 phonegap 开发android应用框架结构 前台页面用jquery mobile开发,后台用axis2开发实现webservice,前后台用js发送...
《构建“校园助手”App:jQuery Mobile、百度地图与PhoneGap的融合应用》 在现代移动互联网技术中,开发一款跨平台的移动应用程序已经成为常态。本项目“校园助手”利用了jQuery Mobile、百度地图API以及PhoneGap这...
PhoneGap Android Demo是一个基于PhoneGap框架的Android应用示例,旨在帮助开发者理解如何在Android平台上使用PhoneGap技术来构建跨平台的移动应用。PhoneGap是一个开源的开发框架,它允许开发者使用HTML、CSS和...