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


Posted in Javascript onNovember 30, 2015

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

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

我们将使用以下插件:
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阅读器的相关教程,希望对大家的学习有所帮助。

Javascript 相关文章推荐
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
js DataSet数据源处理代码
Mar 29 Javascript
Js 刷新框架页的代码
Apr 13 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
jQuery实现textarea自动增长宽高的方法
Dec 18 Javascript
JS中改变this指向的方法(call和apply、bind)
Mar 26 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
详解webpack loader和plugin编写
Oct 12 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 #Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 #Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 #Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 #Javascript
You might like
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
实用函数10
2007/11/08 PHP
深思 PHP 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
PHP 检查扩展库或函数是否可用的代码
2010/04/06 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
toString()一个会自动调用的方法
2010/02/08 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
js格式化时间小结
2014/11/03 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
详解参数传递四种形式
2015/07/21 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
毕业实习个人鉴定范文
2013/12/10 职场文书
运动会领导邀请函
2014/01/10 职场文书
单位成立周年感言
2014/01/26 职场文书
中专生毕业个人鉴定
2014/02/26 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
先进工作者个人总结
2015/02/15 职场文书
会计实训总结范文
2015/08/03 职场文书
2016年父亲节寄语
2015/12/04 职场文书
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技