域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過
如果大家喜歡閱讀博客文章的話，可能都會(huì)使用RSS閱讀器，今天這里我們將使用jQuery來開發(fā)一個(gè)響應(yīng)式的RSS信息閱讀應(yīng)用，使用它你可以將你喜歡的RSS文章以聚合的方式顯示在同一個(gè)頁面，類似一本在線的雜志或者刊物，你也可以自定義配置用來設(shè)定需要訪問的RSS源，希望大家喜歡!
使用的js類庫和jQuery插件：
jQuery
jQuery cookie
jQuery socialist
jQuery feed
Cufon
jquery placeholder
moment.js
HTML代碼
HTML代碼非常簡(jiǎn)單，由顯示內(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配置對(duì)話框，并且保存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> <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(); }); });
注意以上代碼我們自己實(shí)現(xiàn)了一個(gè)遮蓋層來突顯對(duì)話框效果，并且在用戶保存RSS前判斷RSS地址是否正確。
在線演示
我們添加一個(gè)新的RSS地址： (雷鋒網(wǎng))
保存RSS地址后返回主界面顯示所有的RSS內(nèi)容：
大家可以看到列出了gbin1和雷鋒網(wǎng)的所有最新的RSS文章種子。如果你縮放瀏覽器窗口，可以看到內(nèi)容隨著窗口大小自適應(yīng)顯示，是不是很不錯(cuò)?
希望大家喜歡這個(gè)在線整合RSS閱讀雜志，如果你有任何問題，請(qǐng)給我們留言，謝謝!
日期：2012-10-25 來源：GBin1.com
申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！
