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

日期：2012-10-25  来源：GBin1.com

在线演示  本地下载

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

使用的js类库和jQuery插件：

• jQuery
• jQuery cookie
• jQuery socialist 
• jQuery feed
• Cufon
• jquery placeholder
• moment.js

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地址是否正确。

在线演示

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

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

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

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

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