<div> <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> <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;