在android模拟器下显示jquery mobile的页面

来源：互联网发布：mac pro测评编辑：程序博客网时间：2024/05/19 06:35

最近为了毕设在研究jquery mobile , 根据http://www.phonegap100.com/ 上一系列优秀的视频学习。

下面根据视频，总结一下如何在android模拟器上显示jquery mobile 页面

1.首先，建立一个android project

2.在assets下新建文件夹www

在www文件夹下新建 js和css文件夹

3.在 http://phonegap.com/install/ 下载phonegap的最新版本

将cordova.js放到assets/www/js 文件夹下

将cordova-2.9.0.jar放到libs文件夹下，并 add to build path

4.将写好的index.html文件放到www文件夹下

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>jQuery Mobile Web 应用程序</title><meta name="viewport" content="width=device-width" /> <link href="css/jquery.mobile.structure-1.3.2.css" rel="stylesheet" type="text/css"/><link href="css/jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/><script src="js/jquery.js" type="text/javascript"></script><script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script></head> <body> <div data-role="page" id="page"><div data-role="header" data-position="fixed"><h1>jquery Mobile1</h1></div><div data-role="content"><div data-role="collapsible-set" data-theme="c" data-content-theme="d">    <div data-role="collapsible">        <h3>Section 1</h3>        <p>I'm the collapsible content for section 1</p>    </div>    <div data-role="collapsible">        <h3>Section 2</h3>        <p>I'm the collapsible content for section 2</p>    </div>    <div data-role="collapsible">        <h3>Section 3</h3>        <p>I'm the collapsible content for section 3</p>    </div></div></div><div data-role="footer"><h4>页脚</h4></div></div></body></html>

5.将index.html需要用到的js和css 分别放到www下的js和css文件夹中

所用的js和css文件可在jquery mobile 官网下载 http://jquerymobile.com/ 或从CDN 引用jQuery Mobile

CDN:

<head><link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"><script src="http://code.jquery.com/jquery-1.8.3.min.js"></script><script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script></head>

6.修改MainActivity.java 让MainActivity类继承 DroidGap 并用loadUrl方法指定起始的页面

package com.example.test;import android.os.Bundle;import android.app.Activity;import android.view.Menu;import org.apache.cordova.*;public class MainActivity extends DroidGap {@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);        super.loadUrl("file:///android_asset/www/index.html", 2000);}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.main, menu);return true;}}

7.最后运行即可

0 0