@author YHC
在这个教程中我们要去创建一个rss阅读器使用easyUI框架.
查看DEMO
我们将使用以下插件:
- 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 示例:
分享到：
相关推荐
使用jQuery easyUI 创建一个 RSS Feed阅读器 Drag and Drop easyUI 基础的拖动和放置 使用easyUI创建一个拖放的购物车 使用easyUI创建一个课程表 Menu and Button 使用easyUI创建简单的菜单 使用easyUI...
主要帮助大家轻松学习jQuery插件EasyUI，我们将通过 jQuery EasyUI框架创建一个RSS阅读器，感兴趣的小伙伴们可以参考一下
资源名称：Jquery easyui 使用说明内容简介：Jquery easyui 使用说明 中文PDF版主要讲述的是Jquery easyui 使用说明;感兴趣的朋友可以过来看看。jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的...
使用jQueryEasyUI提升客户体验,从零基础到高级,资源长期有效
jquery EasyUI的API，方便使用easyui查看。。。。。。
jqueryEasyUI 下载，及api下载 jqueryEasyUI 下载，及api下载
jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档...
jquery easyui 帮助文档 非常好用的
jquery easyui demo 网页下载下来打包了，还有datagrid简要说明
jQuery EasyUI EasyUI 组件范例
jQuery EasyUI 1.4.3 API 中文 jQuery EasyUI 1.4.3 API jQuery EasyUI 1.4.3 API
jQuery EasyUI 1.5.1文档 jQuery EasyUI 1.5.1文档 jQuery EasyUI 1.5.1文档
jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。... jQuery EasyUI 1.0.5新增了一个校验器插件，用于检测用户的输入的合法性
使用Jquery EasyUI制作的日历，单击input控件弹出日历选择日期，代码很简单，仅供参考
jQuery EasyUI 1 4版本更新内容： Bug（修复） menu：修复在删除一个菜单项的时候该菜单无法正确自适应高度的问题； datagrid：修复在datagrid宽度太小的时候“fitColumns”方法无法正常工作的问题 Improvement...
jquery easyui 中文api文档 jQuery EasyUI 1.2.4+API.chm jquery.easyui-1.2.6API.chm jquery.EasyUI-1.3.1 API_疯狂秀才.chm
jQuery EasyUI 1.5API 中文版文档 最新版jQuery easy ui
近期由于参与的一个Web系统项目前台使用了EasyUI作为Web解决方案，所以查了一下EasyUI的相关资料，发现离线的中文API不太多，而且版本都比较老，索性自己讲EasyUI官网给扣下来，然后做了翻译，文档是2月份过年的时候...
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像（onMouseOver/onMouseOut） Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件，源码奉献！！！