zoukankan      html  css  js  c++  java
  • 使用jQuery开发一个响应式超酷整合RSS信息阅读杂志

     
    申请达人,去除赞助商链接

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

    使用的js类库和jQuery插件:

    HTML代码

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

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

    1. <div id="title">
    2. <h1 style="padding:10px;font-size:50px;">gbin1 rss feed magazine</h1>
    3. <div id="config"><a id="setting" href="#"></a></div>
    4. </div>
    5. <div id="content"></div>

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

    1. <div id="modelwrapper"></div>
    2. <div id="model">
    3. <h2>add new feed</h2>
    4. <div>
    5. 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"/>
    6. </div>
    7. <ul id="rsslist">
    8. </ul>
    9. </div>

    Javascript代码

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

    1. $(document).ready(function () {
    2. $('#setting').animate({opacity:0.4}).animate({opacity:1})
    3. Cufon.replace('body').CSS.ready(function() {
    4. if (cookie.enabled()) {
    5. } else {
    6. alert('you need to enable the cookie, thanks!');
    7. }
    8. var rsslinks = cookie.get('gbin1-rsslinks');
    9. if(rsslinks==null){
    10. cookie.set('gbin1-rsslinks', 'http://feed.feedsky.com/GBin1');
    11. rsslinks = 'http://feed.feedsky.com/GBin1';
    12. }
    13. var rsslinklist = rsslinks.split('|');
    14. var rsslistarray = new Array();
    15. for(a=0;a<rsslinklist.length;a++){
    16. if(rsslinklist[a].trim()!==''){
    17. rsslistarray.push({name:'rss', id:rsslinklist[a]});
    18. }
    19. }
    20. $('#content').socialist({
    21. networks: rsslistarray,
    22. isotope:true,
    23. random:false,
    24. textLength: 800,
    25. theme: 'none',
    26. maxResults: 50,
    27. fields:['source','heading','text','date','image','followers','likes']
    28. });
    29. });
    30. });
     

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

    下面代码控制弹出的RSS配置对话框,并且保存RSS到用户当前浏览器的cookie中:

    1. $(function(){
    2. $('#config').on('click', function(){
    3. console.log('config');
    4. var model = $('#model');
    5. var w = $(window).width();
    6. var h = $(window).height();
    7. var left = w/2 - model.outerWidth()/2;
    8. var top = h/2 - model.outerHeight()/2;
    9. $('#modelwrapper').fadeIn();
    10. $('#model').animate({left:left, top:top}).fadeIn();
    11. var rssliststr = '';
    12. var rsslinks = cookie.get('gbin1-rsslinks');
    13. var rsslinklist = rsslinks.split('|');
    14. for(a=0;a<rsslinklist.length;a++){
    15. if(rsslinklist[a].trim()!==''){
    16. rssliststr += '<li><a style="color:red" class="deleteit" href="#">[x]</a>&nbsp;<span>' + rsslinklist[a] + '</span></li>';
    17. }
    18. }
    19.  
    20. $('#rsslist').html(rssliststr);
    21. Cufon.refresh();
    22. });
    23. var addcxt = $('#addrss').on('click', function(){
    24. var url = $('#rssvalue').val(),
    25. rss = '<span>' + url + '</span>',
    26. addbutton = $('#addrss');
    27. $(this).val('add...');
    28. $.getFeed({
    29. url: url,
    30. success: function(feed) {
    31. console.log(feed.title);
    32. $('#rsslist').append('<li><a style="color:red" class="deleteit" href="#">[x]</a>&nbsp;' + rss + '</li>');
    33. Cufon.refresh();
    34. addbutton.val('+');
    35. },
    36. error: function(){
    37. alert('Please ensure it is a valid RSS url');
    38. addbutton.val('+');
    39. }
    40. });
    41.  
    42. });
    43. $('#saverss').on('click', function(){
    44. var rsslinks='';
    45. $('#model').fadeOut(400);
    46. $('#modelwrapper').fadeOut(600);
    47. $('#rsslist li').each(function(){
    48. rsslinks = rsslinks + '|' + $(this).find('span').text();
    49. });
    50. cookie.set('gbin1-rsslinks', rsslinks, {
    51. expires: 30
    52. });
    53. location.reload();
    54. });
    55. $('#rsslist').on('click', '#rsslist .deleteit', function(){
    56. $(this).closest('li').remove();
    57. });
    58. });
     
     

    注意以上代码我们自己实现了一个遮盖层来突显对话框效果,并且在用户保存RSS前判断RSS地址是否正确。

    在线演示 

    我们添加一个新的RSS地址: http://www.leiphone.com/feed (雷锋网)

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

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

    保存RSS地址后返回主界面显示所有的RSS内容:

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

    大家可以看到列出了gbin1和雷锋网的所有最新的RSS文章种子。如果你缩放浏览器窗口,可以看到内容随着窗口大小自适应显示,是不是很不错?

    希望大家喜欢这个在线整合RSS阅读杂志,如果你有任何问题,请给我们留言,谢谢!

     原文链接:http://www.gbtags.com/gb/share/5888.htm

  • 相关阅读:
    Hadoop集群搭建
    计算机网络学习笔记——初探七层模型
    设计模式之——单例模式
    类的六种关系
    简述JMM
    GC四大算法
    堆和堆参数调优
    Redis持久化
    一次完整的http请求过程
    __add__,关于运算符重载(用户权限)
  • 原文地址:https://www.cnblogs.com/gbtags/p/4698684.html
Copyright © 2011-2022 走看看