android WebView结合jQuery mobile之基础：整合篇
jiedinghui 2013-06-23
http://gundumw100.iteye.com/blog/1545714
先将jQuery，jQueryMobile库文件，css文件copy入assets中，结构如下：
这里有很多好例子
创建assets/index.html，注意jQuery库和css路径千万不要搞错了。
Html代码
<!DOCTYPEhtml>
<html>
<head>
<title>PageTitle</title>
<title>MyPage</title>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<metacharset="utf-8">
<metaname="viewport"content="width=device-width,minimum-scale=1,maximum-scale=1">
<!--
<linkrel="stylesheet"href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"></link>
<scriptsrc="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<scriptsrc="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<linkrel="stylesheet"href="css/jquery.mobile.structure-1.1.0.min.css"type="text/css"></link>
<linkrel="stylesheet"href="css/jquery.mobile.theme-1.1.0.min.css"type="text/css"></link>
-->
<linkrel="stylesheet"href="css/jquery.mobile-1.1.0.min.css"type="text/css">
<linkrel="stylesheet"href="css/jquery.mobile-1.1.0.css"type="text/css">
<scriptsrc="js/jquery-1.7.1.min.js"type="text/javascript"charset="utf-8"></script>
<scriptsrc="js/jquery.mobile-1.1.0.min.js"type="text/javascript"charset="utf-8"></script>
<scripttype="text/javascript">
$(document).ready(function(){
alert('Hi,Iamaalert!');
});
</script>
</head>
<body>
<divdata-role="page">
<divdata-role="header">
<h1>MyTitle</h1>
</div>
<!--/header-->
<divdata-role="content">
<uldata-role="listview"data-inset="true"data-filter="true">
<li><ahref="#">Acura</a></li>
<li><ahref="#">Audi</a></li>
<li><ahref="#">BMW</a></li>
<li><ahref="#">Cadillac</a></li>
<li><ahref="#">Ferrari</a></li>
</ul>
<form>
<labelfor="slider-0">Inputslider:</label>
<inputtype="range"name="slider"id="slider-0"value="25"min="0"max="100"/>
</form>
<ahref="#"data-role="button"data-icon="star"data-theme="a">Starbutton</a>
<ahref="#"data-role="button"data-icon="star"data-theme="b">Starbutton</a>
<ahref="#"data-role="button"data-icon="star"data-theme="c">Starbutton</a>
<ahref="#"data-role="button"data-icon="star"data-theme="d">Starbutton</a>
<ahref="#"data-role="button"data-icon="star"data-theme="e">Starbutton</a>
</div>
<!--/content-->
</div>
<!--/page-->
</body>
</html>
写代码：
Java代码
packagecom.dl.test;
importandroid.graphics.Bitmap;
importandroid.os.Bundle;
importandroid.os.Handler;
importandroid.view.KeyEvent;
importandroid.webkit.WebView;
importandroid.webkit.WebViewClient;
publicclassAppextendsBaseActivity{
privateHandlermHandler=newHandler();
WebViewmWebView;
/**Calledwhentheactivityisfirstcreated.*/
@Override
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mWebView=(WebView)findViewById(R.id.webView);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.requestFocus();
mWebView.setWebViewClient(newWebViewClient());
mWebView.setWebChromeClient(newMyWebChromeClient());//让WebView支持弹出框
/*
mWebView.addJavascriptInterface(newObject(){
publicvoidclickOnAndroid(){
mHandler.post(newRunnable(){
publicvoidrun(){
mWebView.loadUrl("javascript:wave()");
}
});
}
},"demo");*/
mWebView.loadUrl("file:///android_asset/index.html");
}
//如果不做任何处理，浏览网页，点击系统“Back”键，整个Browser会调用finish()而结束自身，
//如果希望浏览的网页回退而不是推出浏览器，需要在当前Activity中处理并消费掉该Back事件。
publicbooleanonKeyDown(intkeyCode,KeyEventevent){
if((keyCode==KeyEvent.KEYCODE_BACK)&&mWebView.canGoBack()){
mWebView.goBack();
returntrue;
}
returnfalse;
}
//内部类
publicclassMyWebViewClientextendsWebViewClient{
//如果页面中链接，如果希望点击链接继续在当前browser中响应，
//而不是新开Android的系统browser中响应该链接，必须覆盖webview的WebViewClient对象。
publicbooleanshouldOverviewUrlLoading(WebViewview,Stringurl){
view.loadUrl(url);
returntrue;
}
publicvoidonPageStarted(WebViewview,Stringurl,Bitmapfavicon){
showProgress();
}
publicvoidonPageFinished(WebViewview,Stringurl){
closeProgress();
}
publicvoidonReceivedError(WebViewview,interrorCode,
Stringdescription,StringfailingUrl){
closeProgress();
}
}
}
android通过webview+jquery设计界面
jQueryMobile开发进阶：API扩展介绍
http://tech.it168.com/a2012/0206/1307/000001307783.shtml
JQUERYMOBILE中文API站
http://www.jqmapi.com/
