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

GEOLO

8620人浏览 · 2010-10-25 12:25:00

GEOLO · 2010-10-25 12:25:00 发布

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

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

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

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

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

　　　　index.html文件的内容如下：

<!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> <div data-role="content"> <p>Page content goes here.</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> </body> </html>

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

　　　<?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．ｊａｖａ的内容如下：

　　　　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"); } }

程序运行效果：