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

来源：互联网发布：网络金融部工作怎么样编辑：程序博客网时间：2024/05/01 05:35

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

将ｊｓ的ａｐｉ文档集成到android项目中，简单而且实用。这个时候，你就可以不再用原生态的UI了。通过HTML　＋　JS　＋css 你可以做出各种各样的UI

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

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

第二步：　将下载好的文件解压，放到android项目的ａｓｓｅｔｓ文件夹中。

第三步：　在assets文件夹下新建一个ｓａｍｐｌｅ文件夹。并在ｓａｍｐｌｅ文件夹中新建一个index.html文件

　　　　index.html文件的内容如下：

[xhtml] view plaincopyprint?
<!DOCTYPE html>   
<html>   
    <head>   
    <title>Page Title</title>   
    <link rel="stylesheet" href="../jquery/jquery.mobile-1.0a1.min.css" mce_href="jquery/jquery.mobile-1.0a1.min.css" />  
    <mce:script src="../jquery/jquery-1.4.3.min.js" mce_src="jquery/jquery-1.4.3.min.js"></mce:script>  
    <mce:script src="../jquery/jquery.mobile-1.0a1.min.js" mce_src="jquery/jquery.mobile-1.0a1.min.js"></mce:script>  
</head>   
<body>   
<div data-role="page">  
    <div data-role="header">  
        <h1>Page Title</h1>  
    </div><!-- /header -->  
    <div data-role="content">   
        <p>Page content goes here.</p>        
    </div><!-- /content -->  
    <div data-role="footer">  
        <h4>Page Footer</h4>  
    </div><!-- /header -->  
</div><!-- /page -->  
</body>  
</html>  

第四步：编辑ｍａｉｎ。ｘｍｌ的内容如下

[xhtml] view plaincopyprint?
<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:orientation="vertical" android:layout_width="fill_parent"  
    android:layout_height="fill_parent">  
    <WebView android:id="@+id/webView01" android:layout_width="fill_parent"  
        android:layout_height="wrap_content" />  
</LinearLayout>  

第五步，编辑myActivity．ｊａｖａ的内容如下：

[java] view plaincopyprint?
package com.geolo.android;  
import android.app.Activity;  
import android.os.Bundle;  
import android.webkit.WebChromeClient;  
import android.webkit.WebView;  
public class MainActivity extends Activity {  
    /** Called when the activity is first created. */  
    @Override  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.main);  
        WebView mWebView = (WebView)findViewById(R.id.webView01);  
        mWebView.getSettings().setJavaScriptEnabled(true);  
        mWebView.setWebChromeClient(new WebChromeClient());  
        mWebView.loadUrl("file:///android_asset/sample/index.html");  
    }  
}  

程序运行效果：