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

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

使用的js类库和jQuery插件：

1.

2.

3.

4.

5.

6.

7.

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']
  });
    }); 
});