注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天边云E家 shaoruisky

IT博文共享,知识的海洋

 
 
 

日志

 
 

使用jQuery easyUI 创建一个 RSS Feed阅读器  

2013-10-25 12:03:01|  分类: jquery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

在这个教程中我们要去创建一个rss阅读器使用easyUI框架.


查看DEMO

我们将使用以下插件:

  • layout:创建一个应用程序界面.
  • datagrid: 显示rss feed列表.
  • tree:显示feed频道.

步骤1: 创建 Layout

  1. <body class="easyui-layout">    
  2.     <div region="north" border="false" class="rtitle">    
  3.         jQuery EasyUI RSS Reader Demo    
  4.     </div>    
  5.     <div region="west" title="Channels Tree" split="true" border="false" style="width:200px;background:#EAFDFF;">    
  6.         <ul id="t-channels" url="data/channels.json"></ul>    
  7.     </div>    
  8.     <div region="center" border="false">    
  9.         <div class="easyui-layout" fit="true">    
  10.             <div region="north" split="true" border="false" style="height:200px">    
  11.                 <table id="dg"     
  12.                         url="get_feed.php" border="false" rownumbers="true"    
  13.                         fit="true" fitColumns="true" singleSelect="true">    
  14.                     <thead>    
  15.                         <tr>    
  16.                             <th field="title" width="100">Title</th>    
  17.                             <th field="description" width="200">Description</th>    
  18.                             <th field="pubdate" width="80">Publish Date</th>    
  19.                         </tr>    
  20.                     </thead>    
  21.                 </table>    
  22.             </div>    
  23.             <div region="center" border="false" style="overflow:hidden">    
  24.                 <iframe id="cc" scrolling="auto" frameborder="0" style="width:100%;height:100%"></iframe>    
  25.             </div>    
  26.         </div>    
  27.     </div>    
  28. </body>   

步骤 2:datagrid处理事件

在这里我们要处理一些由用户触发的事件.

[javascript] view plaincopy
  1. $('#dg').datagrid({    
  2.     onSelect: function(index,row){    
  3.         $('#cc').attr('src', row.link);    
  4.     },    
  5.     onLoadSuccess:function(){    
  6.         var rows = $(this).datagrid('getRows');    
  7.         if (rows.length){    
  8.             $(this).datagrid('selectRow',0);    
  9.         }    
  10.     }    
  11. });    
这个示例使用了'onSelect'事件显示feed 的内容和'onLoadSuccess'事件选择第一行.

步骤3:处理tree事件

当tree数据已经加载,我们需要去选择第一个叶子节点,调用'select'方法去选择那个节点,使用'onSelect'事件去得到选择节点,所以我们能得到对应的'url'值
最终我们调用datagrid 的'load'方法去刷新feed 列表数据.
[javascript] view plaincopy
  1. $('#t-channels').tree({    
  2.     onSelect: function(node){    
  3.         var url = node.attributes.url;    
  4.         $('#dg').datagrid('load',{    
  5.             url: url    
  6.         });    
  7.     },    
  8.     onLoadSuccess:function(node,data){    
  9.         if (data.length){    
  10.             var id = data[0].children[0].children[0].id;    
  11.             var n = $(this).tree('find', id);    
  12.             $(this).tree('select', n.target);    
  13.         }    
  14.     }    
  15. });    

下载 EasyUI 示例:

  评论这张
 
阅读(84)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016