android学习笔记之JQuery整合--将JQuery集成到项目中

转载 2012年03月26日 12:53:37

原文地址:http://blog.csdn.net/geolo/article/details/5963782

 将js的api文档集成到android项目中,简单而且实用。这个时候,你就可以不再用原生态的UI了。通过HTML + JS +css  你可以做出各种各样的UI

     需要注意到是,用这种方式开发程序,软件的运行效率会比原生态UI慢,但是UI界面更加美观和灵活变动。

第一步: 到http://jquerymobile.com/ 下载最新的 JQuery 的API 包

 

 

第二步: 将下载好的文件解压,放到android项目的assets文件夹中。

第三步: 在assets文件夹下新建一个sample文件夹。并在sample文件夹中新建一个index.html文件

 

    index.html文件的内容如下:

    

  1. <!DOCTYPE html>   
  2. <html>   
  3.     <head>   
  4.     <title>Page Title</title>   
  5.     <link rel="stylesheet" href="../jquery/jquery.mobile-1.0a1.min.css" mce_href="jquery/jquery.mobile-1.0a1.min.css" />  
  6.     <mce:script src="../jquery/jquery-1.4.3.min.js" mce_src="jquery/jquery-1.4.3.min.js"></mce:script>  
  7.     <mce:script src="../jquery/jquery.mobile-1.0a1.min.js" mce_src="jquery/jquery.mobile-1.0a1.min.js"></mce:script>  
  8. </head>   
  9. <body>   
  10. <div data-role="page">  
  11.     <div data-role="header">  
  12.         <h1>Page Title</h1>  
  13.     </div><!-- /header -->  
  14.     <div data-role="content">   
  15.         <p>Page content goes here.</p>        
  16.     </div><!-- /content -->  
  17.     <div data-role="footer">  
  18.         <h4>Page Footer</h4>  
  19.     </div><!-- /header -->  
  20. </div><!-- /page -->  
  21. </body>  
  22. </html>  
 

第四步:编辑main。xml的内容如下

   

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical" android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent">  
  5.     <WebView android:id="@+id/webView01" android:layout_width="fill_parent"  
  6.         android:layout_height="wrap_content" />  
  7. </LinearLayout>  
 

第五步,编辑myActivity.java的内容如下:

    

  1. package com.geolo.android;  
  2. import android.app.Activity;  
  3. import android.os.Bundle;  
  4. import android.webkit.WebChromeClient;  
  5. import android.webkit.WebView;  
  6. public class MainActivity extends Activity {  
  7.     /** Called when the activity is first created. */  
  8.     @Override  
  9.     public void onCreate(Bundle savedInstanceState) {  
  10.         super.onCreate(savedInstanceState);  
  11.         setContentView(R.layout.main);  
  12.         WebView mWebView = (WebView)findViewById(R.id.webView01);  
  13.         mWebView.getSettings().setJavaScriptEnabled(true);  
  14.         mWebView.setWebChromeClient(new WebChromeClient());  
  15.         mWebView.loadUrl("file:///android_asset/sample/index.html");  
  16.     }  
  17. }  
 

 

程序运行效果:

    

相关文章推荐

实验楼项目课学习笔记-jQuery翻转拼图游戏

此游戏通过jQuery和Bootstrap 3实现,UI主要使用了Bootstrap的Modal弹窗,对其他模块涉及较少,所以不需要特别熟悉Bootstrap,游戏逻辑通过jQuery和JavaScr...

Yii2 framework学习笔记(八) -- 整合blueimp的jquery-file-upload插件

jquery-file-upload(http://blueimp.github.io/jQuery-File-Upload/)是一个优秀的文件ajax上传插件,支持多选,预览,并发上传等。 jq...
  • iyak85
  • iyak85
  • 2016年02月26日 17:47
  • 1593

web开发-MyEclipse下maven创建Web项目Spring+Spring MVC+MyBatis框架集成-学习笔记十六

功能:web开发包括前端和后端的开发,实现浏览器输入网址之后,请求数据库数据,响应之后将数据呈现在浏览器页面上, MyEclipse下maven创建Web项目Spring+Spring MVC+My...

jquery基础学习笔记

1.jQuery是什么:           JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器,jQuery2.0...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:android学习笔记之JQuery整合--将JQuery集成到项目中
举报原因:
原因补充:

(最多只允许输入30个字)