轻松学习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实现页面打印的三种方法
Mar 05 Javascript
js 小贴士一星期合集
Apr 07 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
jQuery中end()方法用法实例
Jan 08 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
Nov 09 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
javascript实现计算器功能
Mar 30 Javascript
nginx部署多个vue项目的方法示例
Sep 06 Javascript
js+h5 canvas实现图片验证码
Oct 11 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 socket的讲解与实例分析
2013/06/13 PHP
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
javascript中 try catch用法
2015/08/16 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
求职自荐信怎么写
2014/03/06 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
2015年乡镇平安建设工作总结
2015/05/13 职场文书
Java实现简易的分词器功能
2021/06/15 Java/Android
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL