轻松学习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实现原生ajax的几种方法介绍
Sep 21 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
jquery实现图片左右切换的方法
May 07 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
使用Typescript开发微信小程序的步骤详解
Jan 12 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中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
php支付宝APP支付功能
2020/07/29 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
python实现定时同步本机与北京时间的方法
2015/03/24 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
python3个性签名设计实现代码
2018/06/19 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
python保留小数位的三种实现方法
2020/01/07 Python
python opencv实现简易画图板
2020/08/27 Python
python 贪心算法的实现
2020/09/18 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
求职推荐信
2013/10/28 职场文书
自荐信格式
2013/12/01 职场文书
工作表现自我评价
2014/02/08 职场文书
高一学生评语大全
2014/04/25 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书