阿里云優(yōu)惠券 先領(lǐng)券再下單

如果大家喜歡閱讀博客文章的話，可能都會使用RSS閱讀器，今天這里我們將使用jQuery來開發(fā)一個響應(yīng)式的RSS信息閱讀應(yīng)用，使用它你可以將你喜歡的RSS文章以聚合的方式顯示在同一個頁面，類似一本在線的雜志或者刊物，你也可以自定義配置用來設(shè)定需要訪問的RSS源，希望大家喜歡!

使用的js類庫和jQuery插件：

jQuery

jQuery cookie

jQuery socialist

jQuery feed

Cufon

jquery placeholder

moment.js

HTML代碼

HTML代碼非常簡單，由顯示內(nèi)容，RSS設(shè)置窗口及其遮蓋層組成

生成RSS閱讀信息內(nèi)容的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中取得當(dāng)前的RSS內(nèi)容，這里使用sociallist插件來取得RSS信息內(nèi)容，并且使用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到用戶當(dāng)前瀏覽器的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(); }); });

注意以上代碼我們自己實(shí)現(xiàn)了一個遮蓋層來突顯對話框效果，并且在用戶保存RSS前判斷RSS地址是否正確。

在線演示

我們添加一個新的RSS地址： (雷鋒網(wǎng))

保存RSS地址后返回主界面顯示所有的RSS內(nèi)容：

大家可以看到列出了gbin1和雷鋒網(wǎng)的所有最新的RSS文章種子。如果你縮放瀏覽器窗口，可以看到內(nèi)容隨著窗口大小自適應(yīng)顯示，是不是很不錯?

希望大家喜歡這個在線整合RSS閱讀雜志，如果你有任何問題，請給我們留言，謝謝!

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

申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！