首页 > PHP资讯 > HTML5培训技术 > jQueryMobile实现手机新闻浏览器

jQueryMobile实现手机新闻浏览器

HTML5培训技术

  程序的启动我们现在来研究一下程序的启动。当程序启动的时候,展示给用户的是新闻分类列表的页面,为了让每次这个新闻分类页面不为空,我们需要记下用户之前选择了哪些感兴趣的分类。为了实现这个目的,我们通过使用jQuery的一个插件DST.jsplugin去把用户每次选择的新闻分类都保存在HTML5的localStorage中。如果用户移除了某个分类,则也会在浏览器中的本地存储区域中移走(注意,要在支持HTML5标准的浏览器中才能实现这个功能)。当页面装载的时候,我们可以在jQuery的$(document).ready()函数中获得已保存的新闻分类并且逐一处理每个新闻分类下的最新新闻,

  在的代码中,当用户选择了新闻分类后,会将选择的新闻以逗号的方式连接,存储在变量storedNewsArr中,比如用户选择了“TopStories”和“Politics”,则在localStorage存储区域中,会包含字符串“topstories,politics”,接着我们调用如下所示的restore()函数:

  在restore()方法中,如果不存在新闻分类目录,则我们只需要显示一个空的新闻页。如果存在新闻分类,则调用getNews()方法,并将最新的一个分类作为参数传进去。getNews()方法的另外一个参数是restoreNews,接下来看下getNews()和restoreNews()方法:

  jquery手册下载其中参数numNewsToRestore指的是用户选择了多少个新闻分类。在jQuery的ready方法中,首先使用插件DST.jsplugin把cookie读取出来后,形成了字符串数组storedNewsArr,接着调用restore方法,祛斑--朱京玉医生帮您做到--电话:13811078166将storedNewsArr中的最后一个元素(也就是最新用户选择的分类)传入getNews方法中进而获得该分类下的新闻,并通过restoreNews()方法去处理ajax回调返回的内容,最后又再调用restore()方法处理storedNewsArr数组中的倒数第2个新闻分类,如此类推。

  增加新闻分类

  是Business分类下的两条新闻的RSSXML文件摘录,其中对XML的解析结果会保存在currentNews变量中。接下来,将分步介绍populateSingleNews方法的实现。

  1)获得新闻分类和新闻分类的描述

  2)获得新闻分类的列表

  这里的p标签,即id=cat_business部分,是稍后用来做动画变化时用到的;

  观察这里的标签,这个标签是用来当点右边的删除按钮时,产生的删除事件效果时要用到的BusinessNews;

  Thedata-split-theme属性指定使用了什么风格样式的删除按钮,这里我们使用了d样式的风格删除按钮,如果不指定的话,默认使用的是a风格样式的按钮。

  接下来,我们将讨论

  处理删除按钮事件

  处理当用户点每个新闻分类时,跳转到具体的新闻分类下的新闻列表事件

  学习如何设计新闻分类标题出现时的动画效果

  处理删除按钮事件

  处理删除按钮事件的

  查看新闻页

  当用户点某个新闻分类的标题后,就会跳转到新闻列表页,其中会列出所选新闻分类下的新闻,

  接着,调用showProgress去显示等待进度的图标。

  这里再次调用了getNews方法,但这次回调的函数是populateNewsItems,稍后会详细介绍。

  显示新闻标题时的动画效果

  populateSingleNews方法中的最后一个部分就是当每个分类下有最新新闻时,动画显示其新闻标题的效果,将其内容显示在

  中,

  接着将newsArray数组中的第1个元素,也就是最新的一条新闻,通过jQuery的text方法放到

  标签中去。

  之后调用jQueryMobile中封装好的listview的refresh方法朱京玉医生帮您做到,就可以刷新当前目录区域内的内容。

  最后,调用animate方法,其中传入的参数是newsArray数组,

  动画效果


  在显示动画的方法中,pArr参数是传入的新闻列表,animationTarget是最新新闻要显示的区域。而通过使用jquery-dotimeout-plugin这个插件去实现最新新闻的淡入淡出显示,这个插件的效果有点象Javascript中的setTimeout()方法。这里我们定义了每隔2秒,就显示新闻列表数组pArr中的内容。

  而这个动画效果会持续运行下去,但持续到什么时候结束呢?将会知道执行$.doTimeout(…,lse)时才结束。还记得在populateSingleNews方法中,在删除新闻分类时,有一行$.doTimeout(categoryLi,lse)么?这里实际上就是说在删除新闻分类前,先停止动画效果的更新。

  查看新闻详细页的编写

  现在我们来看下,当用户点某个新闻分类标题后,将会跳转到列出该分类下的新闻列表这个功能如何实现,为方便起见,先以如下的RSSXML为例子进行说明:

  我们通过jQuery的find()和each()解析XML,对于每个item元素,取出其新闻的详细内容即description子元素内容放到变量txt中去,最后用将其包裹起来,并最后加上一个水平线作为分隔。

  的值设置为tmpTxt,记得就是新闻内容的区域。

  增加用户自己喜好的新闻分类

  在点GetCategory按钮后,首先判断下拉列表框中用户是否选择了新闻分类,面部提升,微创整形--射频紧肤塑型--玻尿酸--爱贝芙--保妥适--伊维兰--胶原蛋白-----朱京玉医生帮您做到--电话:13811078166如果选择了新闻分类则调用getNews方法,getNews()方法我们已经讨论过,实际上就是这里把选择的新闻分类名称通过ajax调用发送到服务端,获得服务端返回的XML内容。

  在getNews方法的回调方法中,调用的是populateSingleNews(xml);原因是在增加完新闻分类后,跳转到的页面中,是显示刚新增的一个分类以及其最新的一条新闻,如下图,再调用storeCurrentNews(),把用户增加的这个新闻分类保存到HTML5中的localStorage中。

  接着,使用jQuery的find和each方法,去获得获得新闻分类列表中的每个分类的名称,这里实际上是获得

  最后使用DST.jsplugin中的set方法,把用户选择的新闻分类列表都保存在cookie中。

  其他事件代码

  新闻详细页返回主页的事件代码

  在第一部分中,曾经提到在新闻详细内容页的头部和底部都有按钮返回到主页,其代码如下,非常简单,只是调用showCategories代码,具体见下载附件。

  在的代码中,index.html和bridge.php都运行在同一服务器中,实际向yahoo发出的请求会是这个样子:

  Web项目的结构

  最后,我们简单介绍下web项目的结构,详细的请参考附件。

  小结

  在本文中,介绍了如何使用jQueryMobile去实现一个web版本的新闻阅读器,其中了jQueryMobile及jquery-dotimeout插件,jquery.dst插件的使用,在下一篇教程中,将详细如何将已经实现的web应用迁移到android上去。

HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持15不支持0