申请达人,去除赞助商链接

如果大家喜欢阅读博客文章的话,可能都会使用RSS阅读器,今天这里我们将使用jQuery来开发一个响应式的RSS信息阅读应用,使用它你可以将你喜欢的RSS文章以聚合的方式显示在同一个页面,类似一本在线的杂志或者刊物,你也可以自定义配置用来设定需要访问的RSS源,希望大家喜欢!

使用的js类库和jQuery插件:

HTML代码

HTML代码非常简单,由显示内容,RSS设置窗口及其遮盖层组成

生成RSS阅读信息内容的html代码如下:

  1. <div id="title">
  2. <h1 style="padding:10px;font-size:50px;">gbin1 rss feed magazine</h1>
  3. <div id="config"><a id="setting" href="#"></a></div>
  4. </div>
  5. <div id="content"></div>

生成RSS配置弹出窗口及其遮盖层html代码如下:

  1. <div id="modelwrapper"></div>
  2. <div id="model">
  3. <h2>add new feed</h2>
  4. <div>
  5. RSS url: <input id="rssvalue"type="text" placeholder="eg. http://feed.feedsky.com/GBin1" /><input type="button" value="save" id="saverss"/><input type="button" value="+" id="addrss"/>
  6. </div>
  7. <ul id="rsslist">
  8. </ul>
  9. </div>
 
 

Javascript代码

从Cookie中取得当前的RSS内容,这里使用sociallist插件来取得RSS信息内容,并且使用cufon来美化字体:

  1. $(document).ready(function () {
  2. $('#setting').animate({opacity:0.4}).animate({opacity:1})
  3. Cufon.replace('body').CSS.ready(function() {
  4. if (cookie.enabled()) {
  5. } else {
  6. alert('you need to enable the cookie, thanks!');
  7. }
  8. var rsslinks = cookie.get('gbin1-rsslinks');
  9. if(rsslinks==null){
  10. cookie.set('gbin1-rsslinks', 'http://feed.feedsky.com/GBin1');
  11. rsslinks = 'http://feed.feedsky.com/GBin1';
  12. }
  13. var rsslinklist = rsslinks.split('|');
  14. var rsslistarray = new Array();
  15. for(a=0;a<rsslinklist.length;a++){
  16. if(rsslinklist[a].trim()!==''){
  17. rsslistarray.push({name:'rss', id:rsslinklist[a]});
  18. }
  19. }
  20. $('#content').socialist({
  21. networks: rsslistarray,
  22. isotope:true,
  23. random:false,
  24. textLength: 800,
  25. theme: 'none',
  26. maxResults: 50,
  27. fields:['source','heading','text','date','image','followers','likes']
  28. });
  29. });
  30. });
 

下面代码控制弹出的RSS配置对话框,并且保存RSS到用户当前浏览器的cookie中:

  1. $(function(){
  2. $('#config').on('click', function(){
  3. console.log('config');
  4. var model = $('#model');
  5. var w = $(window).width();
  6. var h = $(window).height();
  7. var left = w/2 - model.outerWidth()/2;
  8. var top = h/2 - model.outerHeight()/2;
  9. $('#modelwrapper').fadeIn();
  10. $('#model').animate({left:left, top:top}).fadeIn();
  11. var rssliststr = '';
  12. var rsslinks = cookie.get('gbin1-rsslinks');
  13. var rsslinklist = rsslinks.split('|');
  14. for(a=0;a<rsslinklist.length;a++){
  15. if(rsslinklist[a].trim()!==''){
  16. rssliststr += '<li><a style="color:red" class="deleteit" href="#">[x]</a>&nbsp;<span>' + rsslinklist[a] + '</span></li>';
  17. }
  18. }
  19. $('#rsslist').html(rssliststr);
  20. Cufon.refresh();
  21. });
  22. var addcxt = $('#addrss').on('click', function(){
  23. var url = $('#rssvalue').val(),
  24. rss = '<span>' + url + '</span>',
  25. addbutton = $('#addrss');
  26. $(this).val('add...');
  27. $.getFeed({
  28. url: url,
  29. success: function(feed) {
  30. console.log(feed.title);
  31. $('#rsslist').append('<li><a style="color:red" class="deleteit" href="#">[x]</a>&nbsp;' + rss + '</li>');
  32. Cufon.refresh();
  33. addbutton.val('+');
  34. },
  35. error: function(){
  36. alert('Please ensure it is a valid RSS url');
  37. addbutton.val('+');
  38. }
  39. });
  40. });
  41. $('#saverss').on('click', function(){
  42. var rsslinks='';
  43. $('#model').fadeOut(400);
  44. $('#modelwrapper').fadeOut(600);
  45. $('#rsslist li').each(function(){
  46. rsslinks = rsslinks + '|' + $(this).find('span').text();
  47. });
  48. cookie.set('gbin1-rsslinks', rsslinks, {
  49. expires: 30
  50. });
  51. location.reload();
  52. });
  53. $('#rsslist').on('click', '#rsslist .deleteit', function(){
  54. $(this).closest('li').remove();
  55. });
  56. });
 
 

注意以上代码我们自己实现了一个遮盖层来突显对话框效果,并且在用户保存RSS前判断RSS地址是否正确。

在线演示

我们添加一个新的RSS地址: http://www.leiphone.com/feed (雷锋网)

保存RSS地址后返回主界面显示所有的RSS内容:

大家可以看到列出了gbin1和雷锋网的所有最新的RSS文章种子。如果你缩放浏览器窗口,可以看到内容随着窗口大小自适应显示,是不是很不错?

希望大家喜欢这个在线整合RSS阅读杂志,如果你有任何问题,请给我们留言,谢谢!

使用jQuery开发一个响应式超酷整合RSS信息阅读杂志的更多相关文章

  1. Bootstrap3.1开发的响应式个人简历模板

    在线演示 使用bootstrap3快速开发一个响应式的个人简历,如果有兴趣了解如何开发,请访问GB课程库,地址如下: Bootstrap3构建响应式前端设计师简历模板 http://www.gbtag ...

  2. AudioPlayer.js,一个响应式且支持触摸操作的jquery音频插件

    AudioPlayer.js是一个响应式.支持触摸操作的HTML5 的音乐播放器.本文是对其官网的说用说明文档得翻译,博主第一次翻译外文.不到之处还请谅解.之处. JS文件地址:http://osva ...

  3. Web移动前端开发-——bootstarp响应式框架

    移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: 小于768的为超小屏幕 ...

  4. 一个响应式框架——agera

    Google在上周开源了一个响应式框架——agera,相信它会慢慢地被广大程序员所熟知.我个人对这样的技术是很感兴趣的,在这之前也研究过RxJava,所以在得知Google开源了这样的框架之后第一时间 ...

  5. 一个响应式数据库框架SQLBrite,完美解决数据库和UI的同步更新!

    相信小伙伴们在开发中或多或少都可能遇到过这样的问题:打开一个应用后,为了快速响应,先将数据库中的数据呈现给用户,然后再去网络上请求数据,请求成功之后将数据缓存至数据库,同时更新UI,但是我们经常会这样 ...

  6. 使用media Queries实现一个响应式的菜单

    Media queries是CSS3引入的一个特性,使用它可以方便的实现各种响应式效果.在这个示例中我们将会使用media queries实现一个响应式的菜单.这个菜单会根据当前浏览器屏幕的大小变化而 ...

  7. media Queries实现一个响应式的菜单

    使用media Queries实现一个响应式的菜单   Media queries是CSS3引入的一个特性,使用它可以方便的实现各种响应式效果.在这个示例中我们将会使用media queries实现一 ...

  8. 纯css3开发的响应式设计动画菜单(支持ie8)

    这是一个响应式设计的菜单.单击列表图标,当你显示屏大小可以完全水平放下所有菜单项时,菜单水平显示(如图1).当你的显示屏不能水平放置所有菜单项时,菜单垂直显示(如图2). 而且显示的时候是以动画的型式 ...

  9. 一款由css3和jquery实现的响应式设计导航

    2014年响应式设计成为设计主流.今天要给大家带来一款由css3和jquery实现的响应式设计导航.当显示器为pc时,导航为横条.当客户端为移动端时,呈现坚形导航.我们一起看下效果图: 在线预览    ...

随机推荐

  1. NSCalenda日历类

    1. //将数据库时间和当前时间相比,得出时间差. + (NSString *)dateDescriptionWithDate:(NSDate *)date{ // NSCalendar日历类,提供了 ...

  2. TCP/UDP socket

    TCP socket:有链接,绑定端口,接着去侦听,若有请求,那么accept(),获得新的socket,并且去接收/发送数据报. UDP socket:无连接,不需要侦听,也不用一个新的socket ...

  3. Html/Css(新手入门第一篇)

    一.理解web标准含义--为什么采用web标准*****将内容与样式分离1.web标准是一系列标准,就是一系列技术标准在使用时,是组合应用[1].结构化内容 html[2].表现化内容 css[3]. ...

  4. JavaScript-遍历数组

    遍历数组:依次访问数组中每个元素 for(var i=0; i<arr.length;i++){ arr[i] //当前数组 } <!DOCTYPE html> <html&g ...

  5. 【枚举】bzoj3391 [Usaco2004 Dec]Tree Cutting网络破坏

    #include<cstdio> using namespace std; #define N 10001 int n; int v[N<<1],first[N],next[N ...

  6. jsp中利用response.senddirect(str)重定向,传递参数新思路

    用Servlet进行请求重定向,参数传递好办,直接用request.setAttribute(str1,str2); 但是如果不用Servlet 而是直接用jsp进行转发呢? 我们首先要知道   请求 ...

  7. IOS笔记之UIKit_UIAlertView、UIActionSheet

    //首先必须继承协议 @interface TRViewController : UIViewController<UIAlertViewDelegate,UIActionSheetDelega ...

  8. 125 Valid Palindrome

    public class Solution { public boolean isPalindrome(String s) { if(s==null) return false; s=s.toLowe ...

  9. C#设计模式(15)——命令模式(Command Pattern)

    一.前言 之前一直在忙于工作上的事情,关于设计模式系列一直没更新,最近项目中发现,对于设计模式的了解是必不可少的,当然对于设计模式的应用那更是重要,可以说是否懂得应用设计模式在项目中是衡量一个程序员的 ...

  10. clearing & settlement

    http://blog.donews.com/tianshun/archive/2013/07/ http://wenku.baidu.com/view/e5a736e3e53a580217fcfe1 ...