使用jQuery開發一個響應式超酷整合RSS信息閱讀雜志

jjfat 13年前發布 | 15K 次閱讀 jQuery jQuery插件信息墻社交信息 RSS RSS信息在線雜志

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

使用的js類庫和jQuery插件：

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