WebView加jquery做页面会怎么样呢?
public class MainActivity extends Activity { private static final String TAG = "MainActivity"; // 定义访问的链接 private static String URL = "file:///android_asset/index.html"; // 定义WebView WebView mWebView = null; // 定义数据列表 private List<Program> programList = null; private static final int PROGRAM_NUM = 25; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // 在标题栏上显示进度 getWindow().requestFeature(Window.FEATURE_PROGRESS); // 创建WebView对象 mWebView = new WebView(this); setContentView(mWebView); final Activity activity = this; // 在标题栏显示进度 mWebView.setWebChromeClient(new WebChromeClient() { public void onProgressChanged(WebView view, int progress) { activity.setProgress(progress * 100); } }); programList = initProgramList(); // 设置JS可用 mWebView.getSettings().setJavaScriptEnabled(true); // 把programList添加到js的全局对象window中, // 这样就可以使用window.programList来获取数据 mWebView.addJavascriptInterface(programList, "programList"); mWebView.addJavascriptInterface(this, "MainActivity"); // 加载页面 mWebView.loadUrl(URL); } /* * 定义js回调java函数 */ public void showSelect(int id) { Log.i(TAG, "select:" + id); } // 绑定键盘的向上,向下按钮事件触发相应的js事件 @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_DPAD_UP) { mWebView.loadUrl("javascript:moveUp()"); return true; } if (keyCode == KeyEvent.KEYCODE_DPAD_DOWN) { mWebView.loadUrl("javascript:moveDown()"); return true; } return super.onKeyDown(keyCode, event); } // 初始化数据 private List initProgramList() { List<Program> list = new ArrayList<Program>(); for (int i = 1; i <= PROGRAM_NUM; i++) { Program p = new Program(i, "Program:::" + i); list.add(p); } return list; } /* * 定义简单的数据类 */ class Program { private int id; private String name; public Program(int id, String name) { this.id = id; this.name = name; } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } }
对应的html文件:
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script> <script> var startTop = 120; var startPos = 1; var totalNum = 0; var itemHeight = 40; $(document).ready(function(){ var con = ''; if(window.programList){ //初始化页面 totalNum = window.programList.size(); for(i=0;i< totalNum;i++){ con+='<div class="item" tar="'+programList.get(i).getId()+'">'+programList.get(i).getName()+'</div>'; } } $('#list').html(con); //绑定事件 $('.item').click(function(){ var tar = $(this).attr('tar'); //回调java事件 window.MainActivity.showSelect(tar); }); }); //接收键盘向下事件 function moveDown(){ if(startPos < totalNum){ startPos ++; var top = (1 - startPos)* itemHeight + startTop; $('#list').stop().animate({top:top}); } } //接收键盘向上事件 function moveUp(){ if(startPos > 1){ startPos --; var top = (1 - startPos )* itemHeight + startTop; $('#list').stop().animate({top:top}); } } </script> <style> .box{ position:relative; left:20px; top:20px; width:200px; height:280px; background-color:#CCC; overflow:hidden; } .list{ position:absolute; left:10px; top:120px; width:180px; } .item{ height:40px; line-height:40px; } .select{ position:absolute; left:4px; top:120px; border:1px solid #F00; height:40px; width:190px; } </style> </head> <body > <div class="box"> <div class="list" id="list"> </div> <div class="select"> </div> </div> </body> </html>
相关推荐
android webview js交互, 响应webview中的图片点击事件 ,点击(双击)使图片变大,单击退出
Android 与Js交互的简单实现Demo 你们可以看看,必有收获
安卓webview js交互图片上传前后端代码,图片编码采用base64编码上传保存到服务器,亲测可以实现数据图片上传
自己封装好的一个WebView类,可以直接使用,里面介绍了webview中获取指定ID的值,可以是输入框等等控件,以及获取当前HTTP的HTML源码。对一些嵌入网页操作有很大帮助
完美解决了android4.4 webview js交互冲突
iOS webview js交互,是一个非常好用的demo,亲们快来看看吧。
android webview js交互调用 取源码 webview 详细本地网页加载
android webview js交互
实现单一界面WebView切换assets 中的html,并于JS交互,调用底层控件
android webview与js交互简单demo
这是一个Android webView 跟 js 交互的Demo 主要功能是:1.在webView中向网页注入js 获取到相应的图片 用于在下一个Activity中显示 2.显示中加了图片处理的自定义ImageView 可以手动缩放图片。3.打包了完整的Demo供...
WebView使用之Js交互,点击webview中的图片,调用java代码,放大展示图片,并提供缩放功能!参考博客地址:http://blog.csdn.net/growing_tree/article/details/44652005
x5webview和js交互的三方库
webView与js的交互
android中Webvie和js互相调用的过程
webview javascript 交互.dom是 androidstudio工具。打开就能使用自己测试通过.华为(4.4.4)和nexus5(6.0.1)
Android加载assets里的html并实现WebView与JavaScript的交互
一个简单的android中webview与js交互的例子
IOS加载bundle里的html并实现WebView与JavaScript的交互
在js中调用android代码,实现在android中点击webview上的按钮,屏幕打印Toast。