@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 的前端框架，它封装了一系列的 jQuery 插件，为开发者提供了构建用户界面的简便方法。这个“jquery easyui datagrid demo”包含了一些关于如何使用 jQuery EasyUI 中 Datagrid 组件...
本文实例讲述了通过 jQuery EasyUI框架创建一个RSS阅读器，分享给大家供大家参考。具体如下： 运行效果截图如下： 我们将使用以下插件： layout：创建应用的用户界面。 datagrid：显示 RSS Feed 列表。 tree：显示 ...
jQuery EasyUI 是一个基于 jQuery 的前端框架，它简化了网页用户界面开发，提供了丰富的组件和功能。这个“jQuery EasyUI 帮助文档”包含了全面的API参考和使用指南，对于开发者来说是极具价值的资源。 jQuery ...
资源名称：Jquery easyui 使用说明内容简介：Jquery easyui 使用说明 中文PDF版主要讲述的是Jquery easyui 使用说明;感兴趣的朋友可以过来看看。jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的...
jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列的 UI 组件，使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个框架大大简化了网页界面的设计工作，使得开发者可以专注于业务逻辑，而无需...
jQuery EasyUI 是一个基于 jQuery 的前端框架，它简化了HTML用户界面的开发，提供了一系列易于使用的组件，如对话框、表格、菜单、按钮等。EasyUI 的API是开发者理解和使用这个框架的关键。以下是对jQuery EasyUI ...
使用jQueryEasyUI提升客户体验,从零基础到高级,资源长期有效
jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列的 UI 组件，使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个初试 Jquery EasyUI 的 Demo 旨在帮助新手逐步理解和应用这个强大的工具。 ...
jQuery EasyUI 是一个基于 jQuery 的前端开发框架，它简化了网页界面的构建，提供了一系列的 UI 组件，如对话框、表格、下拉菜单、树形结构等。这个参考资源合集包含了三个重要的文档，分别为 jQuery EasyUI 1.2 API...
1. **教程部分**：逐步指导如何开始使用 jQuery EasyUI，包括安装步骤、基本设置和第一个项目的创建。 2. **组件详解**：深入解析每个组件的功能，包括其属性、方法和事件，以及如何组合使用多个组件。 3. **实战...
jQuery EasyUI 是一个基于 jQuery 的前端框架，它简化了网页用户界面开发，提供了一系列易于使用的组件，如对话框、表格、菜单、按钮等。版本 1.5.1 是一个重要的更新，它不仅包含了之前版本的所有功能，还进行了...
jQuery EasyUI则是一个基于jQuery的UI库，提供了丰富的组件和易于使用的API，用于快速构建现代、响应式的Web应用界面。 在这个"ssm+jqueryeasyui案例"中，我们可以学习如何将这三者结合，构建出功能完善的Web应用。...
jQuery EasyUI 是一个基于 jQuery 的前端开发框架，用于快速构建用户界面。v1.10.0 是这个框架的一个特定版本，包含了一系列组件和功能，适用于网页应用的开发。在这个zip压缩包中，我们可以找到一系列文件，每个都...
总结起来，"Jquery EasyUI 日历Demo"展示了如何利用这个框架轻松创建一个交互式的日期选择器。通过简单的 HTML 结构和 JavaScript 配置，我们可以快速地将这个功能集成到 Web 应用中，提升用户体验。无论是在表单中...
这个系统设计的目的是为了提供一个用户友好的交互界面，方便管理员对各种数据进行收集、存储、查询和管理。 SSH框架是Java领域中广泛使用的MVC（Model-View-Controller）架构，它将业务逻辑、数据和用户界面分离，...
jQuery EasyUI 是一个基于 jQuery 的前端开发框架，用于构建用户界面。它提供了丰富的组件和工具，简化了网页的交互设计和界面布局。1.2.5 版本是该框架的一个稳定版本，它包含了对先前版本的改进和新功能的添加。 ...
jQuery EasyUI 是一个基于 jQuery 的前端开发框架，它简化了网页界面的构建，提供了一系列易于使用的组件和插件，使得开发者能够快速构建出美观、功能丰富的用户界面。这个压缩包包含的是 jQuery EasyUI 的全套文件...
jQuery EasyUI 是一个基于 jQuery 的用户界面插件集合，它提供了一套丰富的 UI 组件库，包括按钮、表单、网格、树形结构等，可以极大地简化前端开发工作，使得开发者能够更加专注于业务逻辑的实现而无需过多地关注...