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

使用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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值