一、 工程构建

1. 新建一个Android工程

2. 在工程中创建目录assets/www

3. 从官网（http://jquerymobile.com/）上下载JQuery和JQuery Mobile框架。

4. 将query.mobile-x.x.x.min.css，query.mobile-x.x.x.min.js，p_w_picpaths文件夹和query-xxx.min.js文件复制到assets/www目录下。

5.  在assets/www目录下创建并编写index.html文件

6. 更改Activity类

示例代码：index.html

<!DOCTYPE HTML>

<html>

<head>

<title>JQuery Mobile Libraries</title>

<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />

<script src="jquery-1.5.min.js"></script>

<script src="jquery.mobile-1.0a4.1.min.js"></script>

</head>

<body>

<div data-role="page">

<div data-role="header">

<h1>Page Title</h1>

</div><!-- /header -->

<div data-role="content">

<p>

Page content goes here.

</p>

</div><!-- /content -->

<div data-role="footer">

<h4>Page Footer</h4>

</div><!-- /header -->

</div>

</body>

</html>

示例代码：MainActivity.java

package com.litsoft.jqmobile;

import android.app.Activity;

import android.os.Bundle;

import android.os.Handler;

import android.webkit.WebView;

/**

 * 1.首先初始化WebView并允许WebView使用Javascript

 * 2.使用handler机制，将MainActivity的对象实例和前端的Javascript绑定，交互的接口名称为contactSupport

 * @author Xiao Peng

 *

 */

public class MainActivity extends Activity {

WebView webView;

private Handler handler = null;

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

// 初始化WebView

webView = new WebView(this);

setContentView(webView);

// 允许使用Javascript

webView.getSettings().setJavaScriptEnabled(true);

handler = new Handler();

webView.addJavascriptInterface(this, "contactSupport");

//装载index.html页面

loadPage("index.html");

}

public void loadPage(String in){

final String url = "file:///android_asset/www/" + in;

loadURL(url);

}

private void loadURL(final String in){

handler.post(new Runnable(){

public void run(){

webView.loadUrl(in);

}

});

}

}

二、 页面设计

1、 说明：

在jQuery Mobile框架设计的HTML页中，通常是一个页面中有一个页面容器，而页面容器中则存在多个页面。页面容器以date-role=“page”作标识，而普通页面以date-role=“content”作标识。在一个页面中，页面头部和尾部是可选的部分。

2、 示例代码：

!-- page -->

<div data-role="page">

<!-- header -->

<div data-role="header">

...

</div>

<!-- content(header,footer) -->

<div data-role="content">

...

</div>

<div data-role="header">

...

</div>

<div data-role="footer">

...

</div>

<!-- content(footer) -->

<div data-role="content">

...

</div>

<div data-role="footer">

...

</div>

<!-- content -->

<div data-role="content">

...

</div>

</div>

在上面的代码中，展示了如何在一个容器页面中包含了三个页面，其中有2个页面是有页头和页脚的，分别用data-role="header"和data-role="footer"标识。