《使用jquery开发一个响应式超酷整合rss信息阅读杂志》由会员分享，可在线阅读，更多相关《使用jquery开发一个响应式超酷整合rss信息阅读杂志（6页珍藏版）》请在金锄头文库上搜索。
1、使用jQuery开发一个响应式超酷整合RSS信息阅读杂志如果大家喜欢阅读博客文章的话，可能都会使用RSS阅读器，今天这里我们将使用jQuery来开发一个响应式的RSS信息阅读应用，使用它你可以将你喜欢的RSS文章以聚合的方式显示在同一个页面，类似一本在线的杂志或者刊物，你也可以自定义配置用来设定需要访问的RSS源，希望大家喜欢！使用的js类库和jQuery插件：1.jQuery2.jQuery cookie3.jQuery socialist4.jQuery feed5.Cufon6.jquery placeholder7.moment.jsHTML代码HTML代码非常简单，由显示内容，RSS
2、设置窗口及其遮盖层组成生成RSS阅读信息内容的html代码如下：gbin1 rss feed magazine生成RSS配置弹出窗口及其遮盖层html代码如下：add new feedRSS url: Javascript代码从Cookie中取得当前的RSS内容，这里使用sociallist插件来取得RSS信息内容，并且使用cufon来美化字体：$（document）。ready（function （） $（#setting）。animate（opacity:0.4）。animate（opacity:1）Cufon.replace（body）。CSS.ready（function（） if （
3、cookie.enabled（） else alert（you need to enable the cookie, thanks!）；var rsslinks = cookie.get（gbin1-rsslinks）；if（rsslinks=null）cookie.set（gbin1-rsslinks, http:/ = http:/ rsslinklist = rsslinks.split（|）；var rsslistarray = new Array（）；for（a=0;arsslinklist.length;a+）if（rsslinklista.trim（）！=）rsslistarra
4、y.push（name:rss, id:rsslinklista）；$（#content）。socialist（networks: rsslistarray,isotope:true,random:false,textLength: 800,theme: none,maxResults: 50,fields:source,heading,text,date,image,followers,likes）；）；）；=分页标记=下面代码控制弹出的RSS配置对话框，并且保存RSS到用户当前浏览器的cookie中：$（function（）$（#config）。on（click, function（）co
5、nsole.log（config）；var model = $（#model）；var w = $（window）。width（）；var h = $（window）。height（）；var left = w/2 - model.outerWidth（）/2;var top = h/2 - model.outerHeight（）/2;$（#modelwrapper）。fadeIn（）；$（#model）。animate（left:left, top:top）。fadeIn（）；var rssliststr = ;var rsslinks = cookie.get（gbin1-rsslinks
6、）；var rsslinklist = rsslinks.split（|）；for（a=0;arsslinklist.length;a+）if（rsslinklista.trim（）！=）rssliststr += x + rsslinklista + ;$（#rsslist）。html（rssliststr）；Cufon.refresh（）；）；var addcxt = $（#addrss）。on（click, function（）var url = $（#rssvalue）。val（），rss = + url + ,addbutton = $（#addrss）；$（this）。
7、val（add）；$.getFeed（url: url,success: function（feed） console.log（feed.title）；$（#rsslist）。append（x + rss + ）；Cufon.refresh（）；addbutton.val（+）；,error: function（）alert（Please ensure it is a valid RSS url）；addbutton.val（+）；）；）；$（#saverss）。on（click, function（）var rsslinks=;$（#model）。fadeOut（400）；$（#
8、modelwrapper）。fadeOut（600）；$（#rsslist li）。each（function（）rsslinks = rsslinks + | + $（this）。find（span）。text（）；）；cookie.set（gbin1-rsslinks, rsslinks, expires: 30）；location.reload（）；）；$（#rsslist）。on（click, #rsslist .deleteit, function（）$（this）。closest（li）。remove（）；）；）；注意以上代码我们自己实现了一个遮盖层来突显对话框效果，并且在用户保存RSS前判断RSS地址是否正确。在线演示我们添加一个新的RSS地址： http:/ （雷锋网）保存RSS地址后返回主界面显示所有的RSS内容：大家可以看到列出了gbin1和雷锋网的所有最新的RSS文章种子。如果你缩放浏览器窗口，可以看到内容随着窗口大小自适应显示，是不是很不错？希望大家喜欢这个在线整合RSS阅读杂志，如果你有任何问题，请给我们留言，谢谢！来源：使用jQuery开发一个响应式超酷整合RSS信息阅读杂志本文由金枪鱼软件，金枪鱼软件刷流量、刷人气、刷QQ空间流量软件，站长必备软件发布共享！
