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

加载方式

Class加载

<div class="easyui-tabs" style="width: 400px;height: 250px"> <div title="Tab1" data-options="closable:true"> tab1 </div> <div title="Tab2" data-options="closable:true"> tab2 </div> <div title="Tab3" data-options="iconCls:'icon-reload',closable:true"> tab3 </div></div>

JS调用加载

<div id="box" style="width: 400px;height: 250px"> <div title="Tab1" data-options="closable:true"> tab1 </div> <div title="Tab2" data-options="closable:true"> tab2 </div> <div title="Tab3" data-options="iconCls:'icon-reload',closable:true"> tab3 </div> </div> <script> $(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 }) ; }); </script>

属性列表

事件列表

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

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