EasyUI 标签用法分析和总结.docx
用法示例
创建tabs
1.经由标记创建Tabs
从标记创建Tabs更容易,我们不需要写任何JavaScript代码。记住把easyui-tabs类添加到div/标记,每个tabpanel经由子div/标记被创建,其用法与Panel一样。
divid=ttclass=easyui-tabsstyle=width:500px;height:250px;
divtitle=Tab1style=padding:20px;display:none;
tab1
/div
divtitle=Tab2closable=truestyle=overflow:auto;padding:20px;display:none;
tab2
/div
divtitle=Tab3iconCls=icon-reloadclosable=truestyle=padding:20px;display:none;
tab3
/div
/div
2.编程创建Tabs
现在我们编程创建Tabs,我们同时捕捉onSelect事件。
1.$(#tt).tabs({
border:false,
onSelect:function(title){
alert(title+isselected);
5. }
6.});
增加新的tabpanel
1. //增加一个新的tabpanel
2.$(#tt).tabs(add,{
title:NewTab,
content:TabBody,
closable:true
6.});
获取选中的Tab
//获取选中的tabpanel和它的tab对象
varpp=$(#tt).tabs(getSelected);
vartab=pp.panel(options).tab; //相应的tab对象
特性
名称
类型
说明
默认值
widthheight
plain
numbernumber
boolean
TabsTabs
True
容器的宽度。容器的高度。
就不用背景容器图片来呈现
tab条。
autoauto
false
fitborder
scrollIncrementscrollDurationtools
booleanbooleannumbernumberarray
True就设置Tabs容器的尺寸以适应它的父容器。
True就显示Tabs容器边框。
每按一次tab滚动按钮,滚动的像素数。每一个滚动动画应该持续的毫秒数。
右侧工具栏,每个工具选项都和Linkbutton一样。
falsetrue100
400
null
事件
名称onLoadonSelectonBeforeCloseonClose
onAdd
onUpdateonContextMenu
参数paneltitletitletitle
titletitle
e,title
说明
当一个ajaxtabpanel完成加载远程数据时触发。当用户选择一个tabpanel时触发。
当一个tabpanel被关闭前触发,返回false就取消关闭动作。当用户关闭一个tabpanel时触发。
当一个新的tabpanel被添加时触发。
当一个tabpanel被更新时触发。
当一个tabpanel被右键点击时触发。
方法
名称optionstabsresize
addclose
参数nonenonenone
options
title
说明
返回tabsoptions。返回全部tabpanel。
调整tabs容器的尺寸并做布局。
增加一个新的tabpanel,options参数是一个配置对象,更多详细信息请参见 tabpanel特性。
关闭一个tabpanel,title参数是指被关闭的panel。
getTab
getSelected
selectexists
update
title
none
titletitle
param
获取指定的tabpanel。
获取选中的tabpanel。选择一个tabpanel。
是指是否存在特定的panel。
更新指定的tabpanel,param包含两个特性:
tab:被更新的tabpanel。options:panel的options。
TabPanel
Tabpanel特性被定义在panel组件里,下面是一些常用的特性。
默认
名称 类型 说明
值
title
content
stringstrin