本文实例为大家分享了Jquery Easyui选项卡组件的实现代码，供大家参考，具体内容如下
加载方式
Class加载
JS调用加载
Box" style="width: 400px;height: 250px">
@H_403_20@
$(function () {
$('#Box').tabs({
// 选项卡容器宽度
width : 500,// 项卡容器高度
height: 400,// 是否不显示控制面板背景。
plain : false,// 选项卡是否将铺满它所在的容器
fit : false,// 是否显示选项卡容器边框
border : true,// 选项卡滚动条每次滚动的像素值
scrollIncrement : 200,// 每次滚动动画持续的时间
scrollDuration : 400,// 工具栏添加在选项卡面板头的左侧或右侧
tools:[{
iconCls : 'icon-add',handler : function () {
alert('添加!');
},}],// 工具栏位置
toolPosition : 'left',// 选项卡位置
tabPosition : 'left',// 选项卡标题宽度，在 tabPosition 属性设置为'left'或'right'的时候才有效
headerWidth : 300,// 标签条的宽度
tabWidth : 250,// 标签条的高度
tabHeight : 25,// 初始化选中一个 tab 页,从0开始
selected : 2,// 是否显示 tab 页标题
showHeader: true
}) ;
});
属性列表
事件列表
Box').tabs({
// 在 ajax 选项卡面板加载完远程数据的时候触发。
onLoad : function (pannel) {
alert(panel);
},// 用户在选择一个选项卡面板的时候触发
onSelect : function (title,index) {
alert(title + '|' + index);
},// 用户在取消选择一个选项卡面板的时候触发。
// (选择另一个时，先触发上一个的此方法，再触发下一个的onSelect方法)
onUnselect : function (title,// 在选项卡面板关闭的时候触发，返回false 取消关闭操作
onBeforeClose : function (title,index) {
alert(title + '|' + index);
return false;
},// 在关闭一个选项卡面板的时候触发
onClose : function (title,// 在添加一个新选项卡面板的时候触发
onAdd : function (title,// 在更新一个选项卡面板的时候触发
onUpdate : function (title,// 在右键点击一个选项卡面板的时候触发
onContextMenu : function (e,title,index) {
alert(e + '|' + title + '|' + index);
}
}) ;
});
方法列表
属性对象
console.log($('#Box').tabs('options'));
//返回所有选项卡面板
console.log($('#Box').tabs('tabs'));
//新增一个选项卡
$('#Box').tabs('add',{
title : '新面板',selected : false,});
//选择指定下标的选项卡
$('#Box').tabs('select',1);
//取消选择指定下标的选项卡
$('#Box').tabs('select',0);
//关闭指定下标的选项卡
$('#Box').tabs('close',1);
//重新调整面板布局和大小
$('#Box').tabs('resize');
//指定下标的选项卡是否存在
console.log($('#Box').tabs('exists',4));
//获取指定下标的选项卡
console.log($('#Box').tabs('getTab',1));
//获取指定面板的索引
console.log($('#Box').tabs('getTabIndex','#tab2'));
//获取被选定的选项卡
console.log($('#Box').tabs('getSelected'));
//显示选项卡标题
$('#Box').tabs('showHeader');
//隐藏选项卡标题
$('#Box').tabs('hideHeader');
//更新一个选项卡
$('#Box').tabs('update',{
tab : $('#tab2'),options : {
Title : '新标题',}
});
//禁用指定下标或标题的选项卡
$('#Box').tabs('disableTab',1);
$('#Box').tabs('disableTab','Tab2');
//启用指定下标或标题的选项卡
$('#Box').tabs('enableTab',1);
$('#Box').tabs('enableTab','Tab2');
//滚动选项卡标题，正值向左，负值向右
$('#Box').tabs('scrollBy',100);
//可以使用$.fn.tabs.defaults 重写默认值对象。
$.fn.tabs.defaults.border = false;
