本文实例为大家分享了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;

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