依赖关系 控制面板 ? 链接按钮
?
使用方法 创建选项卡
1. 使用HTML标签创建选项卡
使用HTML标签创建选项卡十分简单,不需要写任何javascript代码,只需要标签引用'easyui-panel'类。每个选项卡面板都可以使用闭合的标签对创建,使用方法跟创建控制面板一样。
1. 2. 3. tab1 4. 5. 6. tab2 7. 8. 9. tab3 10. 11. 2. 使用脚本创建选项卡
下面的代码演示如何使用脚本创建选项卡,当该选项卡被选择时将会触发'onSelect'事件。
1. $('#tt').tabs({ 2. border:false, 3. onSelect:function(title){ 4. alert(title+' is selected'); 5. } 6. }); 添加一个选项卡面板
1. //添加一个选项卡面板 2. $('#tt').tabs('add',{ 3. title:'New Tab', 4. content:'Tab Body', 5. closable:true 6. }); 获取当前被选择的选项卡
1. //获取当前被选择的选项卡以及相应的选项卡对象 2. var pp = $('#tt').tabs('getSelected'); 3. var tab = pp.panel('options').tab; //相应的选项卡对象 属性
名称
width(宽度) height(高度) plain(简洁模式)
类型 number(数字) number(数字) boolean(布尔型) boolean(布尔型) boolean(布尔型) number(数字) number(数字) array(数组)
描述
选项卡所在容器(控制面板)
的宽度。
选项卡所在容器(控制面板)的高度。
如果设置为true,将不显示控制面板背景。
设置为true时,选项卡的大小将铺满它所在的容器(浏览器)。
默认值 auto auto false
fit(铺满浏览器) false
border(边框) scrollIncrement(滚动增量)
scrollDuration(滚动时间)
tools(工具栏)
如果设置true,将显示选项卡
true
所在容器(控制面板)的边框。 选项卡滚动条每次滚动的像素值。
每次滚动持续的时间,单位为毫秒。
控制面板右侧的工具栏,每个工具选项都跟链接按钮一样。
100 400 null
事件
名称 onLoad onSelect onBeforeClose onClose onAdd onUpdate onContextMenu 方法
名称 options tabs resize add
参数 none none none options
返回选项卡属性对象。 返回所有的选项卡面板。
重置选项卡容器(控制面板)大小并且自动布局。 添加一个新的选项卡面板,options参数是一个可以配置的对象,查看选项卡控制面板属性获取更多信息。
关闭一个选项卡面板,title参数表示哪个选项卡将被关闭。
获取特定的选项卡面板名称。 获取被选择的选项卡面板名称。 选择一个选项卡面板。
验证一个特定的选项卡面板是否存在。
更新特定的选项卡面板,param参数包含2个属性: tab: 将被更新的选项卡。 options: 选项卡相关配置项。
描述
参数 panel title title title title title e, title
描述
当一个选项卡完成ajax远程载入对象时触发。 当用户选择一个选项卡时触发。
在一个选项卡被关闭之前触发,返回false将取消关闭。
在用户关闭一个选项卡面板后触发。 在一个选项卡面板被添加后触发。 在一个选项卡面板被更新后触发。 在一个选项卡面板被鼠标右键单击后触发。
close getTab getSelected select exists update
title title none title title param
选项卡面板
选项卡面板属性在控制面板组件中定义,以下是一些常用属性。
名称 类型 描述 默认值
title(标题) content(内容) href(超链接) cache(缓存) iconCls(图标CSS类) width(宽度) height(高度) 一些额外属性
名称 closable(可关闭) selected(默认选项卡) 2.3 可伸缩面板 可伸缩面板
使用$.fn.accordion.defaults重载默认值
类型 boolean(布尔型) boolean(布尔型) 描述 当这是为true时,选项卡面板将会显示一个关闭按钮,点击该按钮将关闭选项卡。 当设置为true时,将会默认显示该选项卡下的内容。 默认值 false string(字符串) string(字符串) string(字符串) boolean(布尔型) string(字符串) number(数字) number(数字)
选项卡面板的标题。 选项卡面板的内容。
从超链接载入远程内容到选项卡面板。
null
设置为true将缓存选项卡面板,当
true
href(超链接)属性被设置时有效。 一个显示选项卡面板标题图标的CSS类。
选项卡面板的宽度。 选项卡面板的高度。
null auto auto
false
依赖关系
?
控制面板
使用方法 创建可伸缩面板
使用html标签创建可伸缩面板,只须要对标签引用'easyui-accordion'类。 1. 2. 3.
Accordion for jQuery
4.Accordion is a part of easyui framework for jQuery. 5. It lets you define your accordion component on web page more easily.
6. 7. 8. content2 9. 10. 11. content3 12. 13. 在后面将介绍如何改变或者重建可伸缩面板以及修改一些特性。 1. $('#aa').accordion({ 2. animate:false