轻松学习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 相关文章推荐
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
JS字符串函数扩展代码
Sep 13 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
jQuery DOM操作实例
Mar 05 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
用move.js库实现百叶窗特效
Feb 08 Javascript
layui选项卡效果实现代码
May 19 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 Javascript
微信小程序实现文字无限轮播效果
Dec 28 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 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获取汉字首字母的函数
2013/11/07 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
php实现短信发送代码
2015/07/05 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
跟老齐学Python之集合的关系
2014/09/24 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
PyTorch的torch.cat用法
2020/06/28 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
玩转CSS3色彩
2010/01/16 HTML / CSS
医院护士求职自荐信格式
2013/09/21 职场文书
房地产销售经理岗位职责
2014/01/01 职场文书
大学生毕业鉴定
2014/01/31 职场文书
高中生评语大全
2014/04/25 职场文书
触电现场处置方案
2014/05/14 职场文书
员工工作表扬信
2015/05/05 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python