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

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