# 加載方式 ## 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> ``` # 屬性列表 | 屬性名| 值 | 說明| | --- | --- | | width | number | 選項卡容器寬度。默認值 auto。| | height| number| 選項卡容器高度。默認值 auto。| | plain| boolean| 設置為 true 時，將不顯示控制面板背景。默認值 false。| | fit | boolean| 設置為 true 時，選項卡的大小將鋪滿它所在的容器。默認值 false。| | border | boolean| 設置為 true 時，顯示選項卡容器邊框。默認值 true。| | scrollIncrement| number| 選項卡滾動條每次滾動的像素值。默認值100。| | scrollDuration | number| 每次滾動動畫持續的時間，單位：毫秒。默認值400。| | tools| array,selector| 工具欄添加在選項卡面板頭的左側或右側。可用的值有：1. 一個工具菜單數組，每個工具選項都和 linkbutton 相同。2. 一個指向```<div/>```容器工具菜單的選擇器。默認值null。| | toolPosition| string| 工具欄位置。可用值：'left','right'。默認值 right。| | tabPosition| string| 選 項 卡 位 置 。 可 用 值 ：'top','bottom','left','right'。默認值：top。| | headerWidth| number| 選項卡標題寬度，在 tabPosition 屬性設置為'left'或'right'的時候才有效。默認值：150。| | tabWidth | number| 標簽條的寬度。默認值：auto。| | tabHeight| number | 標簽條的高度。默認值：27。| | selected| number | 初始化選中一個 tab 頁。默認值：0。| | showHeader | boolean| 設置為 true 時，顯示 tab 頁標題。默認值：true。| # 事件列表 | 事件名 | 傳參 | 說明 | | --- | --- | | onLoad| panel| 在 ajax 選項卡面板加載完遠程數據的時候觸發。| | onSelect | title,index| 用戶在選擇一個選項卡面板的時候觸發。| | onUnselect| title,index| 用戶在取消選擇一個選項卡面板的時候觸發。| | onBeforeClose| title,index| 在選項卡面板關閉的時候觸發，返回false 取消關閉操作。下面的例子展示了在關閉選項卡面板之前以何種方式顯示確認對話框。| | onClose | title,index | 在用戶關閉一個選項卡面板的時候觸發。| | onAdd | title,index | 在添加一個新選項卡面板的時候觸發。| | onUpdate | title,index | 在更新一個選項卡面板的時候觸發。| | onContextMenu | e,title,index | 在右鍵點擊一個選項卡面板的時候觸發。| *** ``` $(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); } }) ; }); ``` # 方法列表 | 方法名 | 參數 | 說明 | | --- | --- | | options | none | 返回選項卡屬性。| | tabs | none | 返回所有選項卡面板。| | resize | none | 調整選項卡容器大小和布局。| | add | options | 添加一個新選項卡面板，選項參數是一個配置對象，查看選項卡面板屬性的更多細節。在添加一個新選項卡面板的時候它將變成可選的。添加一個非選中狀態的選項卡面板時，記得設置'selected'屬性為 false。| | close | which | 關閉一個選項卡面板，'which'參數可以是選項卡面板的標題或者索引，以指定要關閉的面板。| | getTab | which | 獲取指定選項卡面板，'which'參數可以是選項卡面板的標題或者索引。| | getTabIndex | tab | 獲取指定選項卡面板的索引。| | getSelected | none | 獲取選擇的選項卡面板。下面的例子展示了如何獲取選擇的選項卡面板索引。| | select | which | 選擇一個選項卡面板，'which'參數可以是選項卡面板的標題或者索引。| | unselect | which | 取消選擇一個選項卡面板，'which'參數可以是選項卡面板的標題或者索引。| | showHeader | none | 顯示選項卡的標簽頭。| | hideHeader | none | 隱藏選項卡的標簽頭。| | exists | which | 表明指定的面板是否存在，'which'參數可以是選項卡面板的標題或索引。| | update | param | 更新指定的選項卡面板，'param'參數包含2個屬性：tab：要更新的選項卡面板。| options：面板的屬性。| | enableTab | which | 啟用指定的選項卡面板，'which'參數可以是選項卡面板的標題或索引。| | disableTab | which | 禁用指定的選項卡面板，'which'參數可以是選項卡面板的標題或索引。| | scrollBy | deltaX | 滾動選項卡標題指定的像素數量，負值則向右滾動，正值則向左滾動。| *** ``` //返回屬性對象 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; ```