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

一、简介

jQuery Mobile是jQuery在手机上和平板设备上的版本。jQuery Mobile 不仅给主流移动平台带来jQuery核心库,而且提供了一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。它拥有出色的弹性,轻量化以及渐进增强(Progressive enhancement)特性与可访问性。jQuery Mobile 1.0构建于jQuery核心1.6.4。

PhoneGap是一个用基于HTML5、CSS和JavaScript创建跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone、Android、Palm、Symbian、WP7、Bada和Blackberry智能手机的核心功能——包括地理定位、加速器、联系人、声音和振动等,此外PhoneGap拥有丰富的插件,可以以此扩展无限的功能。

二、开发步骤

1、下载jQuery Mobile和PhoneGap包。

2、新建Android工程testjqm。在assets下新建www、js和css文件夹。

3、导入phonegap.jar包,将jquery.mobile-1.0.css拷贝到css文件夹下,将phonegap-1.2.0.js、jquery-1.6.4.min.js和jquery.mobile-1.0.js拷贝到js文件夹下,将PhoneGap下的xml文件夹及内容拷贝到testjqm工程下的res文件夹下,如下图所示:

3、在www文件夹下新建index.html(HTML5)文件,编写要显示的界面内容。页面基本结构分为header、content、footer三部分。

<div data-role="page">
<div data-role="header" data-theme="a" data-position="fixed"></div>
<div data-role="content"></div>
<div data-role="footer" class="nav_bar" data-position="fixed"></div>
</div>

4、修改StartActivity.java,将extends Activity改为extends DroidGap,去掉setContentView(R.layout.main);添加:

super.loadUrl("file:///android_asset/index/index.html");

修改后的结果如下:

public class StartActivity extends DroidGap {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/index/index.html");
}
}

5、运行模拟器,显示结果如下图:

其中用到的jQuery 组件有:button(按钮)、listview(列表)、navbar(导航)。

三、附录

原文摘自:http://express.ruanko.com/ruanko-express_43/tech-overnight2.html

使用jQuery Mobile + PhoneGap 开发Android应用程序(转)的更多相关文章

  1. PhoneGap与Jquery Mobile组合开发android应用的配置

    PhoneGap与Jquery Mobile结合开发android应用的配置 由于工作需要,用到phonegap与jquery moblie搭配,开发android应用程序. 这些技术自己之前也都没接 ...

  2. PhoneGap与Jquery Mobile结合开发android应用配置

    由于工作需要,用到phonegap与jquery moblie搭配,开发android应用程序. 这些技术自己之前也都没接触过,可以说是压根没听说过,真是感慨,在开发领域,技术日新月异,知识真是永远学 ...

  3. (转)jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明

    (原)http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html jQuery Mobile 移动开发中的日期插件Mobiscroll ...

  4. Unity开发Android应用程序:调用安卓应用程序功能

    开发环境: Eclipse3.4 + adt12 + jdk6 + AndroidSDK2.2 Unity3.4 + windows7 测试设备: HTC Desire HD 本文要涉及到的几个重点问 ...

  5. 用 Eclipse 开发 Android 应用程序

    转自:http://www.apkbus.com/android-13828-1-1.html 开始之前 本教程介绍如何在 Eclipse 环境中进行 Android 应用程序开发,包括两个示例应用程 ...

  6. C#使用Xamarin开发Android应用程序 -- 系列文章

    Xamarin开发Android应用程序 利用Xamaria构建Android应用-公交发车信息屏 Xamarin版的C# SVG路径解析器 C#使用Xamarin开发可移植移动应用(1.入门与Xam ...

  7. 使用jQuery Mobile和Phone Gap开发Android应用程序

    经过了一段时间的学习,初步了解了该如何使用jQuery Mobile和 Phone Gap来开发一个Android应用程序,也想把这些东西介绍给大家. 1. 软件准备 要进行android app的开 ...

  8. 使用jQuery Mobile和Phone Gap开发Android应用程序(转)

    经过了一段时间的学习,初步了解了该如何使用jQuery Mobile和 Phone Gap来开发一个Android应用程序,也想把这些东西介绍给大家. 1. 软件准备 要进行android app的开 ...

  9. PhoneGap&jQuery Mobile应用开发环境配置(For Android)

    关于移动应用为什么用PhoneGap和jQuery Mobile本文不再赘述,有兴趣的童鞋可以自行问“度娘”,有很多这方面的文章.本文主要介绍PhoneGap&jQuery Mobile移动应 ...

随机推荐

  1. mappedBy reference an unknown target entity property解决方法

    Exception in thread "main" org.springframework.beans.factory.BeanCreationException: Error ...

  2. jquery json ajax -2

    如果使用的是虚拟空间, 那么你不能操纵/配置服务器上的php.ini配置文件 但是可以在自己的php文件中, 通过ini_set(...), 和一些对应的函数, 去重置(临时的,仅在当前文件中生效的) ...

  3. OCJP-试题集合 | 对象的比较

    Boolean b1 = new Boolean(true); Boolean b2 = new Boolean(true); 下面哪个能得到true的结果: A b1 == b2 B b1.equa ...

  4. bc.34.B.Building Blocks(贪心)

    Building Blocks Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) ...

  5. IOS AFNetworking

    http://www.coneboy.com/?p=716 AFNetworking 使用总结 (用法+JSON解析) 2013 年 4 月 11 日  No comments Article 这几天 ...

  6. 内存不能为read修复方法:(转自:网上(忘记了))

    指令修复法!开始菜单,运行 ,输入cmd, 回车,在命令提示符下输入(复制即可) : for %1 in (%windir%\system32\*.ocx) do regsvr32.exe /s %1 ...

  7. notepad正则表达式

    文件名称匹配 文件名称: boost_chrono-vc100-mt-1_49.dll 对应的notepad正则表达式: \w*_\w*-\w*-\w*-\w*-\w*.dll 移除空行 查找目标: ...

  8. PXE介绍(PXE+kickstart无人值守安装)

    PXE概念 PXE(Pre-boot Execution Environment,预启动执行环境)是由Intel公司开发的最新技术,工作于Client/Server的网络模式,支持工作站通过网络从远端 ...

  9. js init : function ()

    这个init外面应该还有一层,比如 var a = { init: function () {...}, exit: function () {...} } 这样的话,可以用a.init()来调用这个 ...

  10. There is no getter for property named 'purchaseApplyId' in 'class java.lang.Long'

    mapper.xml: <delete id="deleteByPurchaseAppyId" parameterType="Long"> < ...