轻松学习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 Array.remove() 数组删除
Aug 06 Javascript
javascript开发随笔二 动态加载js和文件
Nov 25 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
Jul 12 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
vue 组件内获取actions的response方式
Nov 08 Javascript
JS继承实现方法及优缺点详解
Sep 02 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
PHP 编程的 5个良好习惯
2009/02/20 PHP
PHP Stream_*系列函数
2010/08/01 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
分页栏的web标准实现
2011/11/01 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
JavaScript学习笔记之JS对象
2015/01/22 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
js倒计时抢购实例
2015/12/20 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
JavaScript中的编码和解码函数
2017/02/15 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
iView框架问题整理小结
2018/10/16 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
Express 配置HTML页面访问的实现
2020/11/01 Javascript
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
简介Django框架中可使用的各类缓存
2015/07/23 Python
详解Python 函数如何重载?
2019/04/23 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
服务行业个人求职的自我评价
2013/12/12 职场文书
积极分子思想汇报
2014/01/04 职场文书
大二学习计划书范文
2014/04/27 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
JavaScript 数组去重详解
2021/09/15 Javascript