标签（空格分隔）： Android JQueryMobile
工程构建
新建一个Android工程
在工程中创建目录assets/www
从官网（http://jquerymobile.com/）上下载JQuery和JQuery Mobile框架。
将query.mobile-x.x.x.min.css，query.mobile-x.x.x.min.js，images文件夹和query-xxx.min.js文件复制到assets/www目录下。
在assets/www目录下创建并编写index.html文件
更改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=\'#\'" /script>
<script src=\'#\'" /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 Prostory
*
*/
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);
}
});
}
}
页面设计说明：
在jQuery Mobile框架设计的HTML页中，通常是一个页面中有一个页面容器，而页面容器中则存在多个页面。页面容器以date-role=“page”作标识，而普通页面以date-role=“content”作标识。在一个页面中，页面头部和尾部是可选的部分。
示例代码：
<!-- 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"标识。
