jquery mobile android浏览器,使用jQuery Mobile实现新闻浏览器(3)
【IT168 技术】在本教程的前两篇文章中,笔者分别向大家介绍了使用jQuery Mobile框架如何去设计手机新闻浏览器,其中实现了一个WEB版本的新闻浏览器,在本教程的最后一篇中,将讲解如何将已实现的web版本的新闻浏览器迁移到Android手机中去,注意的是,本文希望读者拥有一点基础的Android知识。
推荐阅读:
迁移到Android应用中去
在Android应用中,将会使用index.html作为界面的布局,我们将编写一个Android的Activity类将index.html整合到android应用中去。
修改index.html
首先,将index.html中的NEWS_URI修改:
var NEWS_URI='http://rss.news.yahoo.com/rss/';
因为我们在这里不再需要使用bridge.php了,因为我们将index.html整合到了Android应用中去,因此不再存在跨域ajax访问问题,接下来作如下修改:
var EMPTY='';
...
function changeLocation(varURI)...{
showProgress();
$.get(EMPTY,function(data)...{
window.location=varURI;
});
}
changeLocation()方法将会在android.webkit.WebViewClient中被调用。这个方法的主要作用是当从新闻分类页面跳转到新闻详细页面时使用。
1、首先通过showProgress()来显示进度图标的等待状态;
2、jQuery的get()方法中实际上是一个特定的jQuery ajax()方法,在get方法中,我们传入一个空的字符串和一个回调的事件句柄,去设置window.location为我们要查看的具体新闻内容页面的地址。当新闻内容详细页加载完毕后,就会替换掉等待的图标,显示新闻内容页的详细内容;
3、因为在web版本中,是存在浏览器本身的进度条,因此changeLocation方法倒不一定需要,但在手机设备上,有一个等待的图标是能给用户良好的用户体验的。
编写Activity类
接下来,编写NewsActivity类,代码如下:
packagecom.news;
importandroid.app.Activity;
importandroid.webkit.WebView;
importandroid.os.Bundle;
...
publicclassNewsActivityextendsActivity...{
WebView mWebView;
publicvoidonCreate(Bundle savedInstanceState)...{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mWebView=(WebView) findViewById(R.id.webview);
mWebView.setWebViewClient(newNewsClient());
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setDomStorageEnabled(true);
mWebView.loadUrl("android_asset/www/index.html");
} ...
}
1、首先在onCreate方法中,调用了setContentView方法加载了res/layout文件夹下的R.layout.main布局文件;
2、接下来,我们通过findViewById(R.id.webview)得到了一个WebView控件的实例,并设计一个自定义的WebViewClient实例作为给WebView控件的参数,这个自定义的WebViewClient我们命名为NewsClient,我们稍后会介绍。接着我们设置这个WebView容器能支持Javascript和Dom;
3、最后,使用loadUrl将之前我们做的android_asset/www/index.html加载进来,在新闻详细内容页中,当用户点后退按钮后,会回到新闻分类页,在Android中,我们可以捕捉其onKeyDown事件代码,如下:
publicclassNewsActivityextendsActivity...{
WebView mWebView;
publicbooleanonKeyDown(intkeyCode, KeyEvent event)...{
if((keyCode==KeyEvent.KEYCODE_BACK)&&mWebView.canGoBack())...{
mWebView.goBack();
returntrue;
}returnsuper.onKeyDown(keyCode, event);
} ...
}
接下来看下我们如何编写一个自定义的WebViewClient,代码如下:
publicclassNewsActivityextendsActivity...{
WebView mWebView;
privateclassNewsClientextendsWebViewClient...{
publicbooleanshouldOverrideUrlLoading(WebView view, String url)...{
view.loadUrl("javascript:changeLocation('"+url+"')");
returntrue;
} }...
}
首先,我们继承了WebViewClient这个Android内置的浏览器类,并重写了其中的shouldOverrideUrlLoading方法,在这个方法中,调用了之前写的changeLocation方法,而如果我们不定义自己的WebViewClient,那么新闻详细内容页将会在显示在一个单独的新打开的浏览器中,而我们希望新闻内容页只是显示在同一个浏览器页面中。
jquery mobile android浏览器,使用jQuery Mobile实现新闻浏览器(3)相关推荐
- jquery mobile android浏览器,我们怎样使用jQuery Mobile实现手机新闻浏览器
大家是否还对这部分知识存在疑问呀,让我来为大家详细解答一下. Mobile项目是jQuery项目下的在方面的又一力作.swift 教程在本文中,笔者将带你一步步更深入学习使用jQuery Mobile ...
- jquery mobile android浏览器,使用JQuery Mobile实现手机新闻浏览器
[IT168 专稿]jQuery Mobile项目是jQuery项目下的在移动开发方面的又一力作,在本文中,笔者将带你一步步更深入学习使用jQuery Mobile框架去实现一个能在android手机 ...
- jquery mobile android浏览器,使用jQuery Mobile实现手机新闻浏览器(第三章)
在本教程的前两篇文章中,笔者分别向大家介绍了使用jQuery Mobile框架如何去设计手机新闻浏览器,其中实现了一个WEB版本的新闻浏览器,在本教程的***一篇中,将讲解如何将已实现的web版本的新 ...
- html实现在线新闻浏览器,使用JQuery Mobile实现手机新闻浏览器
[IT168 专稿]jQuery Mobile项目是jQuery项目下的在移动开发方面的又一力作,在本文中,笔者将带你一步步更深入学习使用jQuery Mobile框架去实现一个能在android手机 ...
- 让jQuery Tools Scrollable控件在Mobile Web里面支持resize功能
让jQuery Tools Scrollable控件在Mobile Web里面支持resize功能 项目中有两份代码,一份是Main Site,一份是Mobile Site.Main Site里面主页 ...
- 判断浏览器 插件 jquery.ua.js
判断浏览器 插件 jquery.ua.js /*!* jquery.ua.js* @link https://github.com/cloudcome/jquery.ua* @author ydr.m ...
- jQuery.NiceScroll - 有史以来最好的 nicescroll 版本——在现代浏览器和移动设备上极其流畅和一致,资源使用率低(中文文档)
jQuery.NiceScroll 特征 依赖关系 使用 配置参数 有史以来最好的 nicescroll 版本--在现代浏览器和移动设备上极其流畅和一致,资源使用率低 官网:nicescroll.ar ...
- iphone android 开发指南 http://mobile.tutsplus.com
非常好的教程 iphone& android 开发指南 http://mobile.tutsplus.com/category/tutorials/iphone/ http://mobile. ...
- js/jQuery判断浏览器名称、内核版本、浏览器壳
1.js方法/* 判断浏览器名称和版本 目前只能判断:ie/firefox/chrome/opera/safari 2012年5月16日23:47:08 浏览器内核UA:UA; 浏览器内核名称:NV. ...
最新文章
- Provisioning Services 7.8 入门系列教程之十四 UEFI支持和BOOTPTAB 编辑器
- 支持向量机中的函数距离的理解
- 假如 Go 能说话,听听 GMP 的心声
- /usr/bin/ld: skipping incompatible /usr/lib/mysql/libmysqlclient.so when searching for -lmysqlclient
- leetcode56. 合并区间
- jenkins Auth fail验证失败
- android底层重构,【理论】【转】Android项目重构之路:实现篇
- 红旗linux挂载硬盘命令,红旗6sp1修改默认挂载的硬盘分区
- 95-10-070-启动-SocketServer启动
- matlab2c使用c++实现matlab函数系列教程-blkdiag函数
- 中信银行c语言笔试题库,中信银行笔试IT类复习题参考资料带答案解析.doc
- C#网络编程之基础语法 网络流(NetworkStream) 文本流(Stream) 文件流(Filestream )
- 洛谷 U84985 Seaway找路
- 西南大学计算机学院赖红,赖红 - 计算机与信息科学学院 - Powered by 西南大学
- 修真院教学模式三大阶段之任务体系
- AndroidStudio:The number of method references in a .dex file cannot exceed 64K错误
- 艾司博讯:拼多多诱导非官方交易怎么处理?
- 如果张柏芝的孩子长大
- Layui数据表格 换行
- 关于windows11的0x800f0950语言包安装失败
热门文章
- 学的计算机专业美签被拒签,[实用贴]当我被美签拒签后 ——两次美签经历详解...
- invalidate和postInvalidate的区别及使用
- java操作符(Thinking in Java)
- 中国最倒霉的10个姓氏和最好听的10个姓氏~(转载)
- 你的小红伞启动变慢了吗?
- 如何给网站设置favicon.ico图标
- 表白游子思乡的诗句 岭外音书断
- windows恶意软件删除工具(MRT.exe)检查计算机是否感染病毒使用图解
- 用TINA-TI仿真软件来仿真一下电路
- 建筑施工企业信用评价管理系统解决方案