文档详情

EasyUI 标签用法分析和总结.docx

发布:2024-04-26约5.85千字共11页下载文档
文本预览下载声明

用法示例

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

显示全部
相似文档