文档彩票走势图>>jQuery EasyUI使用教程>>jQuery EasyUI使用教程:创建一个RSS阅读器
jQuery EasyUI使用教程:创建一个RSS阅读器
Kendo UI for jQuery——创建现代Web应用程序的最完整UI库!查看详情>>>
在本文中,我们将使用jQuery EasyUI框架创建一个RSS阅读器。
我们将使用以下插件:
- layout:创建应用程序的用户界面
- datagrid:显示RSS Feed列表
- tree:显示Feed频道
Step 1:创建布局
jQuery EasyUI RSS Reader Demo
Title Description Publish Date
Step 2:处理数据网格的事件
在这里,我们需要处理一些由用户触发的事件。
$('#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'事件来选择第一行。
Step 3:处理tree的事件
当tree数据被加载时,我们需要选择第一个子节点,调用'select'方法来选择该节点。使用'onSelect'事件来获得被选择的节点,这样就能得到对应的'url'值。最后,我们调用数据网格的'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示例:
购买最新正版授权!<>