使用jQuery开发一个响应式超酷整合RSS信息阅读杂志

jjfat 11年前

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

使用的js类库和jQuery插件：

HTML代码

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

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

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

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

<div id="modelwrapper"></div>  <div id="model">   <h2>add new feed</h2>   <div>    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"/>   </div>   <ul id="rsslist">   </ul>  </div>

Javascript代码

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

$(document).ready(function () {   $('#setting').animate({opacity:0.4}).animate({opacity:1})   Cufon.replace('body').CSS.ready(function() {    if (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://feed.feedsky.com/GBin1');     rsslinks = 'http://feed.feedsky.com/GBin1';    }    var rsslinklist = rsslinks.split('|');     var rsslistarray = new Array();    for(a=0;a<rsslinklist.length;a++){     if(rsslinklist[a].trim()!==''){      rsslistarray.push({name:'rss', id:rsslinklist[a]});     }    }         $('#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(){    console.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');    var rsslinklist = rsslinks.split('|');    for(a=0;a<rsslinklist.length;a++){     if(rsslinklist[a].trim()!==''){      rssliststr += '<li><a style="color:red" class="deleteit" href="#">[x]</a>&nbsp;<span>' + rsslinklist[a] + '</span></li>';     }    }       $('#rsslist').html(rssliststr);         Cufon.refresh();   });      var addcxt = $('#addrss').on('click', function(){    var url = $('#rssvalue').val(),      rss = '<span>' + url + '</span>',     addbutton = $('#addrss');    $(this).val('add...');    $.getFeed({       url: url,       success: function(feed) {      console.log(feed.title);      $('#rsslist').append('<li><a style="color:red" class="deleteit" href="#">[x]</a>&nbsp;' + rss + '</li>');      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);    $('#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地址是否正确。