easyui打开新的选项卡_Jquery Easyui选项卡组件Tab使用详解（10）

本文实例为大家分享了Jquery Easyui选项卡组件的实现代码，供大家参考，具体内容如下

加载方式

Class加载

tab1

tab2

tab3

JS调用加载

tab1

tab2

tab3

$(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

}) ;

});

属性列表

事件列表

$(function () {

$('#box').tabs({

// 在 ajax 选项卡面板加载完远程数据的时候触发。

onLoad : function (pannel) {

alert(panel);

},

// 用户在选择一个选项卡面板的时候触发

onSelect : function (title,index) {

alert(title + '|' + index);

},

// 用户在取消选择一个选项卡面板的时候触发。

// (选择另一个时，先触发上一个的此方法，再触发下一个的onSelect方法)

onUnselect : function (title, index) {

alert(title + '|' + index);

},

// 在选项卡面板关闭的时候触发，返回false 取消关闭操作

onBeforeClose : function (title, index) {

alert(title + '|' + index);

return false;

},

// 在关闭一个选项卡面板的时候触发

onClose : function (title, index) {

alert(title + '|' + index);

},

// 在添加一个新选项卡面板的时候触发

onAdd : function (title, index) {

alert(title + '|' + index);

},

// 在更新一个选项卡面板的时候触发

onUpdate : function (title, index) {

alert(title + '|' + index);

},

// 在右键点击一个选项卡面板的时候触发

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;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。