轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
内容摘要
本文实例讲述了通过 jQuery EasyUI框架创建一个RSS阅读器，分享给大家供大家参考。具体如下：
运行效果截图如下：
我们将使用以下插件：
layout：创建应用的用户界面。
datagrid：
运行效果截图如下：
我们将使用以下插件：
layout：创建应用的用户界面。
datagrid：
文章正文
本文实例讲述了通过 jQuery EasyUI框架创建一个RSS阅读器，分享给大家供大家参考。具体如下：
运行效果截图如下：
我们将使用以下插件：
layout：创建应用的用户界面。
datagrid：显示 RSS Feed 列表。
tree：显示 feed 频道。
步骤 1：创建布局（Layout）
<body class="easyui-layout">
<div region="north" border="false" class="rtitle">
jQuery EasyUI RSS Reader Demo
</div>
<div region="west" title="Channels Tree" split="true" border="false" style="width:200px;background:#EAFDFF;">
<ul id="t-channels" url="data/channels.json"></ul>
</div>
<div region="center" border="false">
<div class="easyui-layout" fit="true">
<div region="north" split="true" border="false" style="height:200px">
<table id="dg"
url="get_feed.php" border="false" rownumbers="true"
fit="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="title" width="100">Title</th>
<th field="description" width="200">Description</th>
<th field="pubdate" width="80">Publish Date</th>
</tr>
</thead>
</table>
</div>
<div region="center" border="false" style="overflow:hidden">
<iframe id="cc" scrolling="auto" frameborder="0" style="width:100%;height:100%"></iframe>
</div>
</div>
</div>
</body>
步骤 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阅读器的相关教程，希望对大家的学习有所帮助。
代码注释
作者：喵哥笔记
