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

时间：2022-07-06 00:15:01 | 来源：建站知识

时间：2022-07-06 00:15:01 来源：建站知识

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

使用的js类库和jQuery插件：

jQuery

jQuery cookie

jQuery socialist

jQuery feed

Cufon

jquery placeholder

moment.js

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. ; /><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', ';); rsslinks = ';; } 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地址： (雷锋网)

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

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

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

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