文档章节

jQuery EasyUI使用教程之创建一个RSS阅读器

Miss_Hello_World
 Miss_Hello_World
发布于 2015/10/15 11:07
字数 423
阅读 55
收藏 1

<jQuery EasyUI最新版下载>

在本文中,我们将使用jQuery EasyUI框架创建一个RSS阅读器。

查看演示

我们将使用以下插件:

  • layout:创建应用程序的用户界面

  • datagrid:显示RSS Feed列表

  • tree:显示Feed频道

Step 1:创建布局

< 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 >

Step 2:处理数据网格的事件

在这里,我们需要处理一些由用户触发的事件。

$( '#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'事件来选择第一行。

Step 3:处理tree的事件

当tree数据被加载时,我们需要选择第一个子节点,调用'select'方法来选择该节点。使用'onSelect'事件来获得被选择的节点,这样就能得到对应的'url'值。最后,我们调用数据网格的'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示例:jeasyui-app-rssreader.zip

© 著作权归作者所有

Miss_Hello_World
粉丝 22
博文 668
码字总数 404202
作品 0
九龙坡
私信 提问
jQuery EasyUI快速入门实战教程(一)-入门

1、jQuery EasyUI概述 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,...

神码小风
2018/06/28
0
0
jQuery EasyUI入门视频教程【20讲】

jQuery EasyUI入门视频教程【20讲】 jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。非职业讲师孙宇讲授,全...

Amamatthew
2014/09/28
1K
0
jQuery EasyUI使用教程之创建标签页

<jQuery EasyUI最新版下载> 本教程将展示如何使用easyui创建一个标签组件。标签可以动态地添加或删除多个面板,你可以使用标签在同一个页面上显示不同的实体。 标签一次只能显示一个面板,每...

Miss_Hello_World
2015/11/18
119
0
jQuery EasyUI使用教程之创建可折叠面板

<jQuery EasyUI最新版下载> 在本教程中,你将学习到有关于easyui折叠面板的知识。折叠面板包含了一系列的面板,其中所有的面板标题都是可见的,但只有一个面板的主体内容在某个时间是可见的。...

Miss_Hello_World
2015/11/13
454
0
jQuery EasyUI 中文API教程

jQuery EasyUI 框架帮助你轻松建立站点。 easyui是一个基于jquery的集成了各种用户界面的插件。 使用easyui你不需要写太多javascript代码,一般情况下你只需要使用一些html标记来定义用户接口...

Amamatthew
2014/09/11
95
0

没有更多内容

加载失败,请刷新页面

加载更多

IntelliJ IDEA远程连接tomcat,实现单步调试

web项目部署到tomcat上之后,有时需要打断点单步调试,如果用的是Intellij idea,可以通过如下方法实现: 开启debug端口,启动tomcat 以tomcat7.0.75为例,打开bin目录下的catalina.bat文件,...

程序员欣宸
47分钟前
5
0
如何在 Bash 中对变量递增或者递减

导读 编写 Bash 脚本时最常见的算术运算之一是递增和递减变量。这通常在循环中用作计数器,但它也可以在脚本的其他地方出现。 递增和递减意味着分别从数值变量的值中添加或减去值(通常为 1 ...

问题终结者
52分钟前
3
0
如何使用ssh工具便于远程管理

前几天亲眼经历了Linux服务器运维过程,眼看着别人熟练运用Linux管理工具,自个心里不是滋味,所以自己特意整理了一篇“专题”:使用ssh服务远程管理主机。 首先在使用ssh服务工具之前,先熟...

Linux就该这么学
今天
6
0
IT兄弟连 HTML5教程 介绍HTML5给你认识 习题

1.关于HTML5说法正确的是:(C) A.HTML5只是对HTML4的一个简单升级 B.所有主流浏览器都支持HTML5 C.HTML5新增了离线缓存机制 D.HTML5主要是针对移动端进行了优化 2.为了标识一个HTML文...

老码农的一亩三分地
今天
6
0
关于1加手机rom的分析过程

1、关于清理app缓存的信息 framework.jar和services.jar文件,都位于/system/framework目录下面 framework.jar的android.os.Intent类里面定义了action "android.intent.action.CLEAR_PKG",这......

shatian
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部