JQuery Mobile实现手机新闻浏览器(2)
在上一篇文章中,已经讨论了程序的结构和页面的布局,并简单介绍了一些jQuery Mobile的使用技巧。在本篇文章中,笔者将继续完成我们web应用的新闻浏览器的设计。
程序的启动
我们现在来研究一下程序的启动。当程序启动的时候,展示给用户的是新闻分类列表的页面,为了让每次这个新闻分类页面不为空,我们需要记下用户之前选择了 哪些感兴趣的分类。为了实现这个目的,我们通过使用jQuery的一个插件DST.js plugin去把用户每次选择的新闻分类都保存在HTML5的localStorage中。如果用户移除了某个分类,则也会在浏览器中的本地存储区域中移 走(注意,要在支持HTML5标准的浏览器中才能实现这个功能)。当页面装载的时候,我们可以在jQuery的$(document).ready()函 数中获得已保存的新闻分类并且逐一处理每个新闻分类下的最新新闻,代码如下:
在上面的代码中,当用户选择了新闻分类后,会将选择的新闻以逗号的方式连接,存储在变量storedNewsArr中,比如用户选择了“Top Stories”和“Politics”,则在localStorage存储区域中,会包含字符串“topstories,politics”,接着我们 调用如下所示的restore()函数:
在restore()方法中,如果不存在新闻分类目录,则我们只需要显示一个空的新闻页。如果存在新闻分类,则调用getNews()方法,并将最新的 一个分类作为参数传进去。getNews()方法的另外一个参数是restoreNews,接下来看下getNews()和restoreNews()方 法:
getNews()方法中提供了向ajax发起请求的地址varURI,这个uri形如如下的形 式:bridge.php?fwd=http://rss.news.yahoo.com/rss/+ varCat,其中varCat就是用户选择的新闻目录,比如bridge.php?fwd=http://rss.news.yahoo.com /rss/topstories。而ajax返回的回调函数为restoreNews()。在restoreNews()中,又调用了一个自定义的方法 populateSingleNews(),这个方法稍后会解析。而最后又重新调用了restore方法,形成了一个递归调用,顺序为:
其中参数numNewsToRestore指的是用户选择了多少个新闻分类。在jQuery的ready方法中,首先使用插件DST.js plugin把cookie读取出来后,形成了字符串数组storedNewsArr,接着调用restore方法,将storedNewsArr中的最 后一个元素(也就是最新用户选择的分类)传入getNews方法中进而获得该分类下的新闻,并通过restoreNews()方法去处理ajax回调返回 的内容,最后又再调用restore() 方法处理storedNewsArr数组中的倒数第2个新闻分类,如此类推。
增加新闻分类
现在我们讨论如何增加一个新闻分类,这将在populateSingleNews()中实现。而populateSingleNews()中是根据返回 的XML使用jQuery进行解析,将解析后的结果通过jQuery Mobile的UI展现出来。为了方便讨论,先选取一段Yahoo News返回的RSS进行讨论,如下:
上面是Business分类下的两条新闻的RSS XML文件摘录,其中对XML的解析结果会保存在currentNews变量中。接下来,将分步介绍populateSingleNews方法的实现。
1)获得新闻分类和新闻分类的描述
首先,我们调用jQuery的find().first().text()方法去解析xml,分别获得了分类的目录和描述,以上面的xml为例子,得到的结果是tmpTxt='business' 和desc='Business News'.
2) 获得新闻分类的列表
上面的代码,实际上会组合成如下形式的变量:
接下来,为了重用代码,我们编写了如下的代码段:
最后,将上述的代码添加到currentNews后,代码如下:
实际上,以上代码的效果就会使用jQuery中的prependTo()方法,把如下的代码加到id="currentNews"的元素之后,即:
如果你还不是很清楚的话,下面这个图,将生动的讲解了其对应的结构:
▲图1 新闻分类列表DOM结构图
这里的p标签,即id="cat_business"部分,是稍后用来做动画变化时用到的;
观察这里的<a id="cat_business_d">标签,这个标签是用来当点右边的删除按钮时,产生的删除事件效果时要用到的Business News;
data-split-icon样式是使用了jQuery Mobile中默认的删除按钮;
The data-split-theme属性指定使用了什么风格样式的删除按钮,这里我们使用了d样式的风格删除按钮,如果不指定的话,默认使用的是a风格样式的按钮。
接下来,我们将讨论
处理删除按钮事件 处理当用户点每个新闻分类时,跳转到具体的新闻分类下的新闻列表事件 学习如何设计新闻分类标题出现时的动画效果 处理删除按钮事件
处理删除按钮事件的代码如下:
还记得categoryLi='cat_business_d_li'么?我们调用了$.doTimeout( categoryLi, false )去实现了当删除新闻分类时,出现的动画效果。$.doTimeout是来自插件jquery-dotimeout-plugin实现的功能,我们在稍侯 的动画部分将会详细讨论。接下来找到了新闻分类的标记newListItem并使用jQuery的remove()方法将其删除。在删除新闻分类后,再调 用storeCurrentNews()方法,重新将当前剩下的新闻分类进行保存,这个方法稍后会详细讨论。
查看新闻页
当用户点某个新闻分类的标题后,就会跳转到新闻列表页,其中会列出所选新闻分类下的新闻,代码如下:
我们找到了标签categoryA,这个值其实就是新闻分类标题的id值,即:
接着,调用showProgress去显示等待进度的图标。
还记得我们之前的category变量为'cat_business'么?这里我们用substring(4)方法,取得了实际的分类名,也就是business。
这里再次调用了getNews方法,但这次回调的函数是populateNewsItems,稍后会详细介绍。
显示新闻标题时的动画效果
populateSingleNews方法中的最后一个部分就是当每个分类下有最新新闻时,动画显示其新闻标题的效果,将其内容显示在<p id="cat_business">中,代码如下:
首先通过find()和each方法将XML中的新闻标题(即RSS XML中的title标签中的内容)保存到数组newsArray中。
接着将newsArray数组中的第1个元素,也就是最新的一条新闻,通过jQuery的text方法放到<p id="cat_business">标签中去。
之后调用jQuery Mobile中封装好的listview的refresh方法,就可以刷新当前目录区域内的内容。
最后,调用animate方法,其中传入的参数是newsArray数组,<p id="cat_business">标签和当前目录分类的区域标签(categoryLi='cat_business_d_li'),下面来讲解下如何实现动画效果。
动画效果
代码如下:
在显示动画的方法中,pArr参数是传入的新闻列表,animationTarget是最新新闻要显示的位置区域。而通过使用jquery- dotimeout-plugin这个插件去实现最新新闻的淡入淡出显示,这个插件的效果有点象Javascript中的setTimeout()方法。 这里我们定义了每隔2秒,就显示新闻列表数组pArr中的内容。
而这个动画效果会持续运行下去,但持续到什么时候结束呢?将会知道执 行$.doTimeout(…,false)时才结束。还记得在populateSingleNews方法中,在删除新闻分类时,有一 行$.doTimeout(categoryLi, false)么?这里实际上就是说在删除新闻分类前,先停止动画效果的更新。
查看新闻详细页的编写
现在我们来看下,当用户点某个新闻分类标题后,将会跳转到列出该分类下的新闻列表这个功能如何实现,为方便起见,先以如下的RSS XML为例子进行说明:
下面看下populateNewsItems()的编写:
我们通过jQuery的find()和each()解析XML,对于每个item元素,取出其新闻的详细内容即description子元素内容放到变量txt中去,最后用<p></p>将其包裹起来,并最后加上一个水平线作为分隔。
最后通过jQuery的html()方法将<div id="contentNews">的值设置为tmpTxt,记得<div id="contentNews">就是新闻内容的区域。
增加用户自己喜好的新闻分类
当在增加新闻分类页中,点‘Get Category’按钮后,触发buttonGetCategoryVar.click()事件,代码如下:
在点‘Get Category’ 按钮后,首先判断下拉列表框中用户是否选择了新闻分类,如果选择了新闻分类则调用getNews方法,getNews()方法我们已经讨论过,实际上就是 这里把选择的新闻分类名称通过ajax调用发送到服务端,获得服务端返回的XML内容。
在getNews方法的回调方法中,调用的是 populateSingleNews(xml);原因是在增加完新闻分类后,跳转到的页面中,是显示刚新增的一个分类以及其最新的一条新闻,如下图,再 调用storeCurrentNews(),把用户增加的这个新闻分类保存到HTML5中的localStorage中。
▲图2 上面这个图中,用户选择了两个新闻分类U.S.News和Economy News。
保存用户选择的新闻分类
现在我们回过头来看如何使用HTML5的localStorage特性去保存用户选择的新闻分类。
代码如下:
在storeCurrentNews方法中,首先调用DST.js plugin插件清除掉原先保存的cookie。
接着, 使用jQuery的find和each方法,去获得图2获得新闻分类列表中的每个分类的名称,这里实际上是获得<p id='cat_business'>中的cat_business部分,然后再用substring方法获得其实际名称,这里即business为其分类名称。
最后使用DST.js plugin中的set方法,把用户选择的新闻分类列表都保存在cookie中。
其他事件代码讲解
新闻详细页返回主页的事件代码
在第一部分中,曾经提到在新闻详细内容页的头部和底部都有按钮返回到主页,其代码如下,非常简单,只是调用showCategories代码,具体见下载附件。
关于AJAX请求
最后我们来讨论ajax请求部分,在这里,我们是通过使用bridge.php作为中转,对Yahoo的新闻发起ajax请求,重新复习下getNews的代码:
在上面的代码中,index.html和bridge.php都运行在同一服务器环境中,实际向yahoo发出的请求会是这个样子:
bridge.php?fwd=http://rss.news.yahoo.com/rss/business,而bridge.php会通过php 的cUrl方法向Yahoo发出请求,将获得的xml信息写在文件tmpFile.txt中,具体代码如下,关于php的cUrl方法请参考PHP手册, 这里不再详细介绍。
Web项目的结构
最后,我们简单介绍下web项目的结构,详细的请参考附件。
项目根目录下包含 index.html and bridge.php.
css-js下包含了所有的css和Javascript文件,如下
jquery-1.4.4.min.js, jquery.mobile-1.0a2.min.js,jquery.mobile-1.0a2.min.css 这些都是jQuery Mobile的文件
jquery.ba-dotimeout.js 为 jquery-dotimeout-plugin 库文件.
jquery.dst.js 为 DST.js plugin 库文件.
news\img\wait.gif 为等待图标,最后,记得引用这些Javascript代码库,如下:
小结
在本文中,介绍了如何使用jQuery Mobile去实现一个web版本的新闻阅读器,其中讲解了jQuery Mobile及jquery-dotimeout插件,jquery.dst插件的使用,在下一篇教程中,将详细讲解如何将已经实现的web应用迁移到 android上去。
JQuery Mobile实现手机新闻浏览器(2)的更多相关文章
- 使用JQuery Mobile实现手机新闻浏览器
jQuery Mobile项目是jQuery项目下的在移动开发方面的又一力作,在本文中,笔者将带你一步步更深入学习使用jQuery Mobile框架去实现一个能在android手机上运行的新闻浏览器, ...
- jQuery Mobile开发的新闻阅读器,适应iphone和android手机
程序猿都非常赖.你懂的! 我们常常上新浪,腾讯.雅虎等各大站点上面看新闻.他们也都各自推出了自家的手机新闻阅读器.今天我自己使用jQuery Mobile 来实现这一功能.图片大小上传限制了大小250 ...
- 为什么html5用的jQuery Mobile在手机浏览器/微信中打开字体很小
头部加入 <header> <metaname="viewport"content="width=device-width, initial-scale ...
- 使用jQuery Mobile实现新闻浏览器(3)
在本教程的前两篇文章中,笔者分别向大家介绍了使用jQuery Mobile框架如何去设计手机新闻浏览器,其中实现了一个WEB版本的新闻浏览器,在本教程的最后一篇中,将讲解如何将已实现的web版本的新闻 ...
- jQuery Mobile 连接外部连接或切换动画
jQuery Mobile不同网页之间的跳转问题 jQuery Mobile,一个新的手机终端脚本开发库,从名字可以看出,它是基于jQuery:目前支持很多种手机设备,包括IOS/Android/Bl ...
- 为什么需要jQuery Mobile
1.没有所谓的移动互联网,只有一个互联网 2.设计移动网站不需要什么特别处理 3.一个站点应当在所有设备(台式机.手机.电视)上都能运转 jQuery Mobile诞生 ...
- jquery mobile RedirectToAction url地址不更新
使用asp.net mvc 和 jquery mobile 开发手机版网站 发起一个post请求,在第一个action里做了处理,用RedirectToAction 跳转到其他action继续处理后, ...
- jquery mobile 建wap站
使用jquery mobile 建手机wap站: 几篇比较好的文章 http://wap.yesky.com/dev/225/30974725.shtml http://tech.it168.com/ ...
- Cordova+jQuery Mobile+Spring REST
Cordova可以方便地建立跨平台的移动应用,使用jQuery Mobile做手机界面,后台使用rest提供数据交互. 首先,使用jQuery Mobile建立一个页面: <!DOCTYPE h ...
随机推荐
- Android 核心分析之十三Android GWES之Android窗口管理
Android GWES之Android窗口管理1基本构架原理 Android的窗口管理是C/S模式的.Android中的Window是表示Top Level等顶级窗口的概念.DecorView是Wi ...
- ubuntu sh脚本双击运行
自从13.04以后,双击sh脚本文件就已经默认是geidt打开了,要想运行,从nautilus-->文件-->首选项-->行为-->可执行文件 有三个选项,默认是第二个,如果想 ...
- Path Sum的变体
早上看到一个面经题跟Path Sum很像, 给一个TreeNode root和一个target,找到一条从根节点到leaf的路径,其中每个节点和等于target. 与Path Sum不同是, Path ...
- Linux和远程系统同步文件(未完成)
实验环境: 本地主机:192.168.0.1 远程主机:192.168.0.101 1. 使用 scp,把/root/tardir1/achieve2.tar.gz复制到远程主机的root用户的hom ...
- html 用图片代替重置按钮
提交时,若把按钮设置成图片提交特别方便只要 <input type="image" alt="点此提交" src="images/button. ...
- Mysql数据库连接、查询、记录集操作代码
Mysql数据库链接代码 function dbConnect($hostname,$username,$pass,$db_name,$pconnect =0) { $func=empty($pcon ...
- CF#FF(255)-div1-C【水题,枚举】
[吐槽]:本来没打算写这题的题解的,但惨不忍睹得WA了13次,想想还是记录一下吧.自己的“分类讨论能力”本来就很差. 刚开始第一眼扫过去以为是LIS,然后忽略了复杂度,果断TLE了,说起来也好惭愧,也 ...
- Android模拟器分辨率介绍
转自: http://www.cnblogs.com/xrtd/p/3746935.html 本人喜欢用 HVGA(320x480) Skins:HVGA.HVGA-L.HVGA-P.QVGA-L. ...
- 总结Selenium自动化测试方法(四)WebDriver常用的操作
四.WebDriver常用的操作 1.控制浏览器操作 #控制浏览器的大小 self.driver.set_window_size(480,800) #控制浏览器返回 self.driver.back( ...
- 基于Linux的oracle数据库管理 part1( 准备及linux基础 )
主要内容 1. 安装VMware tools (好处, 显示效果增强, 从虚拟机出来不需要alt+ctrl 切换) 2. Linux 启动过程, 方便以后oracle 自动启动与关闭 3. Linux ...