android WebView结合jQuery mobile之基础：整合篇

gundumw100

浏览: 5826179 次
性别:
来自: 上海

最近访客更多访客>>

李大喵和李小喵

hjg8858

henseycai

beishen

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

android进阶

jquery mobile android

先将jQuery，jQueryMobile库文件，css文件copy入assets中，结构如下：

创建assets/index.html，注意jQuery库和css路径千万不要搞错了。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<title>My Page</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
	<!-- 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"></link>
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
	<link rel="stylesheet" href="css/jquery.mobile.structure-1.1.0.min.css" type="text/css"></link>
	<link rel="stylesheet" href="css/jquery.mobile.theme-1.1.0.min.css" type="text/css"></link>
	 -->
<link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" type="text/css">
<link rel="stylesheet" href="css/jquery.mobile-1.1.0.css" type="text/css">
	
<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.mobile-1.1.0.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
$(document).ready(function(){
	alert('Hi,I am a alert!');
	
});
</script>  
</head>
<body>
	<div data-role="page">

		<div data-role="header">
			<h1>My Title</h1>
		</div>
		<!-- /header -->

		<div data-role="content">
			<ul data-role="listview" data-inset="true" data-filter="true">
				<li><a href="#">Acura</a></li>
				<li><a href="#">Audi</a></li>
				<li><a href="#">BMW</a></li>
				<li><a href="#">Cadillac</a></li>
				<li><a href="#">Ferrari</a></li>
			</ul>
			<form>
				<label for="slider-0">Input slider:</label> 
				<input type="range" name="slider" id="slider-0" value="25" min="0" max="100" />
			</form>
			<a href="#" data-role="button" data-icon="star" data-theme="a">Star button</a>
			<a href="#" data-role="button" data-icon="star" data-theme="b">Star button</a>
			<a href="#" data-role="button" data-icon="star" data-theme="c">Star button</a>
			<a href="#" data-role="button" data-icon="star" data-theme="d">Star button</a>
			<a href="#" data-role="button" data-icon="star" data-theme="e">Star button</a>
		</div>
		<!-- /content -->

	</div>
	<!-- /page -->
</body>
</html>

写代码：

package com.dl.test;

import android.graphics.Bitmap;
import android.os.Bundle;
import android.os.Handler;
import android.view.KeyEvent;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class App extends BaseActivity {
	private Handler mHandler = new Handler();
	WebView mWebView;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		mWebView = (WebView) findViewById(R.id.webView);
		mWebView.getSettings().setJavaScriptEnabled(true);
		mWebView.requestFocus();
		mWebView.setWebViewClient(new WebViewClient());
		mWebView.setWebChromeClient(new MyWebChromeClient());//让WebView支持弹出框
		/*
mWebView.addJavascriptInterface(new Object() {
			public void clickOnAndroid() {
				mHandler.post(new Runnable() {
					public void run() {
						mWebView.loadUrl("javascript:wave()");
					}
				});
			}
		}, "demo");*/
		mWebView.loadUrl("file:///android_asset/index.html");
	}

	// 如果不做任何处理，浏览网页，点击系统“Back”键，整个Browser会调用finish()而结束自身，
	// 如果希望浏览的网 页回退而不是推出浏览器，需要在当前Activity中处理并消费掉该Back事件。
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
			mWebView.goBack();
			return true;
		}
		return false;
	}

	// 内部类
	public class MyWebViewClient extends WebViewClient {
		// 如果页面中链接，如果希望点击链接继续在当前browser中响应，
		// 而不是新开Android的系统browser中响应该链接，必须覆盖 webview的WebViewClient对象。
		public boolean shouldOverviewUrlLoading(WebView view, String url) {
			view.loadUrl(url);
			return true;
		}

		public void onPageStarted(WebView view, String url, Bitmap favicon) {
			showProgress();
		}

		public void onPageFinished(WebView view, String url) {
			closeProgress();
		}

		public void onReceivedError(WebView view, int errorCode,
				String description, String failingUrl) {
			closeProgress();
		}
	}

}

android通过webview+jquery设计界面
http://zhanhao.iteye.com/blog/1113776

jQuery Mobile开发进阶：API扩展介绍
http://tech.it168.com/a2012/0206/1307/000001307783.shtml

JQUERY MOBILE 中文API站
http://www.jqmapi.com/

TestJQueryAndroid.zip (735.2 KB)
描述: 工程
下载次数: 902

jquery.mobile-1.1.0.zip (1.1 MB)
描述: jQueryMobile库文件，官网上下载的。
下载次数: 288

查看图片附件

分享到：

android WebView结合javascript相互调用 | 仿人人网右边可推出的效果

2012-05-31 14:58
浏览 29242
评论(4)
分类:移动开发
查看更多

4 楼 xierui 2014-12-09

很不错，学习了。。。。。。。

3 楼 wv1124 2013-12-31

按返回键无法退出啊

2 楼 cclovescw 2013-04-25

我在模拟器上显示好的，但是试了几台真机，都是显示加载的那个圈圈，一直在那里

1 楼 xieqi2008 2012-10-25

html访问servlet出现个奇怪的问题，如果有手机的uc流浪器直接打开html，html能正确读到servlet的数据。如果用webview给这个html套壳后再访问servlet，读到的就是错误的数据。

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

android WebView结合jQuery mobile之基础：整合篇

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

android WebView结合jQuery mobile之基础：整合篇

评论

发表评论

相关推荐

NestedScrollView滚动到顶部固定子View悬停挂靠粘在顶端

自定义Behavior实现AppBarLayout越界弹性效果

Android - 一种相似图片搜索算法的实现

使用SpringAnimation实现带下拉弹簧动画的 ScrollView

Android为应用添加角标（Badge）

Android端与笔记本利用局域网进行FTP通信

PorterDuffColorFilter 在项目中的基本使用

ColorAnimationView 实现了滑动Viewpager 时背景色动态变化的过渡效果

迷你轻量级全方向完美滑动处理侧滑控件SlideLayout

Effect

动态主题库Colorful，容易地改变App的配色方案

对视图的对角线切割DiagonalView

仿淘宝京东拖拽商品详情页上下滚动黏滞效果

让任意view具有滑动效果的SlideUp

AdvancedWebView

可设置圆角背景边框的按钮, 通过调节色彩明度自动计算按下(pressed)状态颜色

网络请求库相关

ASimpleCache一个简单的缓存框架

使用ViewDragHelper实现的DragLayout开门效果

保证图片长宽比的同时拉伸图片ImageView

最近访客更多访客>>