jq调用android方法,Android端JQueryMobile使用教程(一)

标签(空格分隔)： 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

JQuery Mobile Libraries

Page Title

Page content goes here.

Page Footer

示例代码：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”作标识。在一个页面中，页面头部和尾部是可选的部分。

示例代码：

...

...

...

...

...

...

...

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