本文共 6314 字,大约阅读时间需要 21 分钟。
原文地址:
先将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>
-
-
- <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>
-
-
- </div>
-
- </body>
- </html>
Page TitleMy Page
写代码:
- 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;
-
-
- @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());
-
-
-
-
-
-
-
-
-
-
- mWebView.loadUrl("file:///android_asset/index.html");
- }
-
-
-
- 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 {
-
-
- 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();
- }
- }
-
- }
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设计界面
jQuery Mobile开发进阶:API扩展介绍
JQUERY MOBILE 中文API站
转载地址:http://ogfaz.baihongyu.com/