使用jQuery开发一个响应式超酷整合RSS信息阅读杂志-白红宇

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

阅读量：6432 次

发布时间：2019-06-23

本文共 3173 字，大约阅读时间需要 10 分钟。

日期：2012-10-25 来源：

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

使用的js类库和插件：

HTML代码

HTML代码非常简单，由显示内容，RSS设置窗口及其遮盖层组成

生成RSS阅读信息内容的html代码如下：


             
      gbin1 rss feed magazine

生成RSS配置弹出窗口及其遮盖层html代码如下：


     
         
      add new feed
    
      
               RSS url:

Javascript代码

从Cookie中取得当前的RSS内容，这里使用sociallist插件来取得RSS信息内容，并且使用来美化字体：

$(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

下面代码控制弹出的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
     
      ';            }        }            $('#rsslist').html(rssliststr);                    Cufon.refresh();    });        var addcxt = $('#addrss').on('click', function(){        var url = $('#rssvalue').val(),             rss = '
      ' + url + '',            addbutton = $('#addrss');        $(this).val('add...');        $.getFeed({           url: url,           success: function(feed) {                console.log(feed.title);                $('#rsslist').append('
      [x] ' + rss + '
');                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阅读杂志，如果你有任何问题，请给我们留言，谢谢！

来源：

转载地址：http://oatga.baihongyu.com/

你可能感兴趣的文章