博客
关于我
android通过webview+jquery设计界面
阅读量:613 次
发布时间:2019-03-13

本文共 6314 字,大约阅读时间需要 21 分钟。

原文地址:

 

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

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

Html代码 
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <title>Page Title</title> 
  5. <title>My Page</title> 
  6. <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
  7. <meta charset="utf-8"> 
  8. <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> 
  9.     <!--  
  10.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"></link> 
  11.     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
  12.     <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 
  13.     <link rel="stylesheet" href="css/jquery.mobile.structure-1.1.0.min.css" type="text/css"></link> 
  14.     <link rel="stylesheet" href="css/jquery.mobile.theme-1.1.0.min.css" type="text/css"></link> 
  15.      --> 
  16. <link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" type="text/css"> 
  17. <link rel="stylesheet" href="css/jquery.mobile-1.1.0.css" type="text/css"> 
  18.      
  19. <script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script> 
  20. <script src="js/jquery.mobile-1.1.0.min.js" type="text/javascript" charset="utf-8"></script> 
  21.  
  22. <script type="text/javascript"> 
  23. $(document).ready(function(){ 
  24.     alert('Hi,I am a alert!'); 
  25.      
  26. }); 
  27. </script>   
  28. </head> 
  29. <body> 
  30.     <div data-role="page"> 
  31.  
  32.         <div data-role="header"> 
  33.             <h1>My Title</h1> 
  34.         </div> 
  35.         <!-- /header --> 
  36.  
  37.         <div data-role="content"> 
  38.             <ul data-role="listview" data-inset="true" data-filter="true"> 
  39.                 <li><a href="#">Acura</a></li> 
  40.                 <li><a href="#">Audi</a></li> 
  41.                 <li><a href="#">BMW</a></li> 
  42.                 <li><a href="#">Cadillac</a></li> 
  43.                 <li><a href="#">Ferrari</a></li> 
  44.             </ul> 
  45.             <form> 
  46.                 <label for="slider-0">Input slider:</label>  
  47.                 <input type="range" name="slider" id="slider-0" value="25" min="0" max="100" /> 
  48.             </form> 
  49.             <a href="#" data-role="button" data-icon="star" data-theme="a">Star button</a> 
  50.             <a href="#" data-role="button" data-icon="star" data-theme="b">Star button</a> 
  51.             <a href="#" data-role="button" data-icon="star" data-theme="c">Star button</a> 
  52.             <a href="#" data-role="button" data-icon="star" data-theme="d">Star button</a> 
  53.             <a href="#" data-role="button" data-icon="star" data-theme="e">Star button</a> 
  54.         </div> 
  55.         <!-- /content --> 
  56.  
  57.     </div> 
  58.     <!-- /page --> 
  59. </body> 
  60. </html> 
Page TitleMy Page
写代码:
Java代码
  1. package com.dl.test; 
  2.  
  3. import android.graphics.Bitmap; 
  4. import android.os.Bundle; 
  5. import android.os.Handler; 
  6. import android.view.KeyEvent; 
  7. import android.webkit.WebView; 
  8. import android.webkit.WebViewClient; 
  9.  
  10. public class App extends BaseActivity { 
  11.     private Handler mHandler = new Handler(); 
  12.     WebView mWebView; 
  13.  
  14.     /** Called when the activity is first created. */ 
  15.     @Override 
  16.     public void onCreate(Bundle savedInstanceState) { 
  17.         super.onCreate(savedInstanceState); 
  18.         setContentView(R.layout.main); 
  19.         mWebView = (WebView) findViewById(R.id.webView); 
  20.         mWebView.getSettings().setJavaScriptEnabled(true); 
  21.         mWebView.requestFocus(); 
  22.         mWebView.setWebViewClient(new WebViewClient()); 
  23.         mWebView.setWebChromeClient(new MyWebChromeClient());//让WebView支持弹出框 
  24.         /*
  25. mWebView.addJavascriptInterface(new Object() {
  26.             public void clickOnAndroid() {
  27.                 mHandler.post(new Runnable() {
  28.                     public void run() {
  29.                         mWebView.loadUrl("javascript:wave()");
  30.                     }
  31.                 });
  32.             }
  33.         }, "demo");*/ 
  34.         mWebView.loadUrl("file:///android_asset/index.html"); 
  35.     } 
  36.  
  37.     // 如果不做任何处理,浏览网页,点击系统“Back”键,整个Browser会调用finish()而结束自身, 
  38.     // 如果希望浏览的网 页回退而不是推出浏览器,需要在当前Activity中处理并消费掉该Back事件。 
  39.     public boolean onKeyDown(int keyCode, KeyEvent event) { 
  40.         if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) { 
  41.             mWebView.goBack(); 
  42.             return true
  43.         } 
  44.         return false
  45.     } 
  46.  
  47.     // 内部类 
  48.     public class MyWebViewClient extends WebViewClient { 
  49.         // 如果页面中链接,如果希望点击链接继续在当前browser中响应, 
  50.         // 而不是新开Android的系统browser中响应该链接,必须覆盖 webview的WebViewClient对象。 
  51.         public boolean shouldOverviewUrlLoading(WebView view, String url) { 
  52.             view.loadUrl(url); 
  53.             return true
  54.         } 
  55.  
  56.         public void onPageStarted(WebView view, String url, Bitmap favicon) { 
  57.             showProgress(); 
  58.         } 
  59.  
  60.         public void onPageFinished(WebView view, String url) { 
  61.             closeProgress(); 
  62.         } 
  63.  
  64.         public void onReceivedError(WebView view, int errorCode, 
  65.                 String description, String failingUrl) { 
  66.             closeProgress(); 
  67.         } 
  68.     } 
  69.  
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/

你可能感兴趣的文章
Mysql 数据库InnoDB存储引擎中主要组件的刷新清理条件:脏页、RedoLog重做日志、Insert Buffer或ChangeBuffer、Undo Log
查看>>
mysql 数据库中 count(*),count(1),count(列名)区别和效率问题
查看>>
mysql 数据库备份及ibdata1的瘦身
查看>>
MySQL 数据库备份种类以及常用备份工具汇总
查看>>
mysql 数据库存储引擎怎么选择?快来看看性能测试吧
查看>>
MySQL 数据库操作指南:学习如何使用 Python 进行增删改查操作
查看>>
MySQL 数据库的高可用性分析
查看>>
MySQL 数据库设计总结
查看>>
Mysql 数据库重置ID排序
查看>>
Mysql 数据类型一日期
查看>>
MySQL 数据类型和属性
查看>>
mysql 敲错命令 想取消怎么办?
查看>>
Mysql 整形列的字节与存储范围
查看>>
mysql 断电数据损坏,无法启动
查看>>
MySQL 日期时间类型的选择
查看>>
Mysql 时间操作(当天,昨天,7天,30天,半年,全年,季度)
查看>>
MySQL 是如何加锁的?
查看>>
MySQL 是怎样运行的 - InnoDB数据页结构
查看>>
mysql 更新子表_mysql 在update中实现子查询的方式
查看>>
MySQL 有什么优点?
查看>>