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