`

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

jquerymobileandroid 
阅读更多
先将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/
  • 大小: 18.7 KB
  • 大小: 273 KB
分享到：
| 仿人人网右边可推出的效果
评论
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，读到的就是错误的数据。
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics