如果大家喜歡閱讀博客文章的話，可能都會使用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> <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(); }); });
注意以上代碼我們自己實現了一個遮蓋層來突顯對話框效果，并且在用戶保存RSS前判斷RSS地址是否正確。
在線演示
我們添加一個新的RSS地址： (雷鋒網)
保存RSS地址后返回主界面顯示所有的RSS內容：
大家可以看到列出了gbin1和雷鋒網的所有最新的RSS文章種子。如果你縮放瀏覽器窗口，可以看到內容隨著窗口大小自適應顯示，是不是很不錯?
希望大家喜歡這個在線整合RSS閱讀雜志，如果你有任何問題，請給我們留言，謝謝!
日期：2012-10-25 來源：GBin1.com
申請創業報道，分享創業好點子。點擊此處，共同探討創業新機遇！
