Easyui组件依赖关系图
搞了两年多后端,一直在使用easyui,知其然不知其所以然,看到一些比较对自己比较有用的文章就转载一下,方便自己以后忘记的时候回头看一下:
参考博客地址:http://www.easyui.info/archives/765.html
一个好的框架,其内部组件肯定都是有继承关系的,这样才能最大限度地重复利用代码,easyui这方面做得也不错。所谓“继承”大家一定先要理解概念,easyui里面的继承并不是真的继承,只是一种简单的依赖关系。
这种依赖关系主要体现在几方面:
“依赖者”会继承“被依赖者”的属性,初始化自己的options
“依赖者”会在自身内部初始化的时候,同时会初始化“被依赖者”
“依赖者”会通过调用“被依赖者”对象的方法来实现自己和“被依赖者”同名的方法
以下图片就为easyui的依赖关系图:
举个例子:layout组件依赖于panel组件,那么layout组件的属性,拥有自己独特的属性,同时还拥有panel的属性,所以在初始化layout的东、南、西、北几个region的时候,可以给pannel的属性赋值,我当时在官方文档找layout的tools属性找不到,才发现在pannel里面。如下例子:
添加西侧区域面板和工具菜单按钮
- $('#cc').layout('add',{
- region: 'west',
- width: 180,
- title: 'West Title',
- split: true,
- tools: [{
- iconCls:'icon-add',
- handler:function(){alert('add')}
- },{
- iconCls:'icon-remove',
- handler:function(){alert('remove')}
- }]
- });
在layout的区域属性(如下)是没有tools的,在panel中就有。
区域面板属性定义与panel组件类似,下面的是公共的和新增的属性:
属性名 | 属性值类型 | 描述 | 默认值 |
---|---|---|---|
title | string | 布局面板标题文本。 | null |
region | string | 定义布局面板位置,可用的值有:north, south, east, west, center。 | |
border | boolean | 为true时显示布局面板边框。 | true |
split | boolean | 为true时用户可以通过分割栏改变面板大小。 | false |
iconCls | string | 一个包含图标的CSS类ID,该图标将会显示到面板标题上。 | null |
href | string | 用于读取远程站点数据的URL链接 | null |
collapsible | boolean | 定义是否显示折叠按钮。(该属性自1.3.3版开始可用) | true |
minWidth | number | 最小面板宽度。(该属性自1.3.3版开始可用) | 10 |
minHeight | number | 最小面板高度。(该属性自1.3.3版开始可用) | 10 |
maxWidth | number | 最大面板宽度。(该属性自1.3.3版开始可用) | 10000 |
maxHeight | number | 最大面板高度。(该属性自1.3.3版开始可用) | 10000 |
expandMode | string | 在点击折叠面板时候的扩展模式。可用值有:“float”、“dock”和null float:区域面板将展开并浮动在顶部,在鼠标焦点离开面板时会自动隐藏。 dock:区域面板将展开并钉在面板上,在鼠标焦点离开面板时不会自动隐藏。 null:什么也不会发生。 (该属性自1.4.4版开始可用) |
float |
collapsedSize | number | 折叠后的面板大小。(该属性自1.4.4版开始可用) | 28 |
hideExpandTool | boolean | 为true时隐藏折叠面板上的扩展面板工具。(该属性自1.4.4版开始可用) | false |
hideCollapsedContent | boolean | 为true时隐藏折叠面板上的标题栏。(该属性自1.4.4版开始可用) | true |
collapsedContent | string,function(title) | 定义在折叠面板上要显示标题内容。 1. 标题字符串; 2. 通过函数返回标题内容。 (该方法自1.4.4版开始可用) 代码示例: collapsedContent: function(title){
var region = $(this).panel('options').region;
if (region == 'north' || region == 'south'){
return title;
} else {
return '<div class="mytitle">'+title+'</div>';
}
}
|
附上jquery easyui1.4.5中文版API的下载地址:https://download.****.net/download/richie696/9484935(这个是我在****找的,要积分,本来想免积分共享一份的,上传的时候提示已经存在,新手,不知道怎么操作,见谅!)