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

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

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

使用的js类库和jQuery插件：

HTML代码

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

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

生成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>

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

下面代码控制弹出的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> <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> ' + 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();
});
});