轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器

这篇文章主要帮助大家轻松学习jQuery插件EasyUI，我们将通过 jQuery EasyUI框架创建一个RSS阅读器，感兴趣的小伙伴们可以参考一下

本文实例讲述了通过 jQuery EasyUI框架创建一个RSS阅读器，分享给大家供大家参考。具体如下：
运行效果截图如下：

我们将使用以下插件：
layout：创建应用的用户界面。
datagrid：显示 RSS Feed 列表。
tree：显示 feed 频道。
步骤 1：创建布局（Layout）

   jQuery EasyUI RSS Reader Demo 
 
      Title Description Publish Date

步骤 2：数据网格（DataGrid）处理事件

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

 $('#dg').datagrid({ onSelect: function(index,row){ $('#cc').attr('src', row.link); }, onLoadSuccess:function(){ var rows = $(this).datagrid('getRows'); if (rows.length){ $(this).datagrid('selectRow',0); } } });

本实例使用 'onSelect' 事件来显示 feed 的内容，使用 'onLoadSuccess' 事件来选择第一行。
步骤 3：树形菜单（Tree）处理事件

当树形菜单（Tree）数据已经加载，我们需要选择第一个叶子节点，调用 'select' 方法来选择该节点。使用 'onSelect' 事件来得到已选择的节点，这样我们就能得到对应的 'url' 值。最后我们调用数据网格（DataGrid）的 'load' 方法来刷新 feed 列表数据。

 $('#t-channels').tree({ onSelect: function(node){ var url = node.attributes.url; $('#dg').datagrid('load',{ url: url }); }, onLoadSuccess:function(node,data){ if (data.length){ var id = data[0].children[0].children[0].id; var n = $(this).tree('find', id); $(this).tree('select', n.target); } } });

以上就是关于EasyUI创建RSS Feed阅读器的相关教程，希望对大家的学习有所帮助。

以上就是轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器的详细内容，更多请关注0133技术站其它相关文章！