轻松学习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 相关文章推荐
基于jquery的滚动新闻列表
Jun 19 Javascript
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
jquery选择器的选择使用及性能介绍
Jan 16 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 Javascript
理解Javascript的call、apply
Dec 16 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 Javascript
vue实现移动端悬浮窗效果
Dec 01 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 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代码
2010/07/17 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
haskell实现多线程服务器实例代码
2013/11/26 Python
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
高级Java程序员面试题
2016/06/23 面试题
工程造价专业大学生自荐信
2013/10/01 职场文书
师范大学毕业自我鉴定
2013/11/21 职场文书
服装设计专业求职信
2014/06/16 职场文书
学校读书活动总结
2014/06/30 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书