先將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/