使用jQuery easyUI 创建一个 RSS Feed阅读器
@author YHC在这个教程中我们要去创建一个rss阅读器使用easyUI框架.
http://my.csdn.net/uploads/201208/08/1344395808_7846.jpg
查看DEMO
我们将使用以下插件:
[*]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'事件选择第一行.
<div style="text-align: left;">步骤3:处理tree事件
当tree数据已经加载,我们需要去选择第一个叶子节点,调用'select'方法去选择那个节点,使用'onSelect'事件去得到选择节点,所以我们能得到对应的'url'值
页:
[1]