轻松学习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 相关文章推荐
javascript new一个对象的实质
Jan 07 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
详解angular ui-grid之过滤器设置
Jun 07 Javascript
node.js文件上传重命名以及移动位置的示例代码
Jan 19 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 Javascript
jquery插件实现代码雨特效
Apr 24 jQuery
轻松学习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
smtp邮件发送一例
2006/10/09 PHP
php xml文件操作代码(一)
2009/03/20 PHP
用php将任何格式视频转为flv的代码
2009/09/03 PHP
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
浅谈PDF.js使用心得
2018/06/07 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python线程中对join方法的运用的教程
2015/04/09 Python
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
四年级科学教学反思
2014/02/10 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
数控技校生自我鉴定
2014/04/19 职场文书
个人借款协议书范本
2014/11/17 职场文书
2014年科普工作总结
2014/12/06 职场文书
八达岭长城导游词
2015/01/30 职场文书
二十年同学聚会致辞
2015/07/28 职场文书