第二百節，jQuery EasyUI，Tabs(選項卡)組件

jQuery EasyUI，Tabs(選項卡)組件

 

學習要點：

　　1.加載方式

　　2.屬性列表

　　3.事件列表

　　4.方法列表

　　5.選項卡面板

 

本節課重點了解 EasyUI 中 Tabs(選項卡)組件的使用方法，這個組件依賴於 Panel（面 板）組件和 LinkButton(按鈕)組件。

 

一．加載方式

class 加載方式

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

tabs()將符合規則的元素實現選項卡方法

htnl

<div id="box">
    <div title="Tab1">
        tab1
    </div>
    <div title="Tab2">
        tab2
    </div>
    <div title="Tab3">
        tab3
    </div>
</div>

js代碼

$('#box').tabs({
　　//...
});

 

 

二．屬性列表

width   number 選項卡容器寬度。默認值 auto。

$(function () {
    $('#box').tabs({
        width:500,      //選項卡容器寬度
        height:400      //選項卡容器高度
    });
});

 

height  number 選項卡容器高度。默認值 auto。

$(function () {
    $('#box').tabs({
        width:500,      //選項卡容器寬度
        height:400      //選項卡容器高度
    });
});

 

plain   boolean 設置為 true 時，將不顯示控制面板背景。默認值 false。

$(function () {
    $('#box').tabs({
        width:500,      //選項卡容器寬度
        height:400,      //選項卡容器高度
        plain:true      //設置為 true 時，將不顯示控制面板背景。默認值 false。
    });
});

 

fit   boolean 設置為 true 時，選項卡的大小將鋪滿它所在的容器。默認值 false。

$(function () {
    $('#box').tabs({
        width:500,      //選項卡容器寬度
        height:400,      //選項卡容器高度
        fit:true      //設置為 true 時，選項卡的大小將鋪滿它所在的容器。默認值 false。
    });
});

 

border   boolean 設置為 true 時，顯示選項卡容器邊框。默認值 true。

$(function () {
    $('#box').tabs({
        width:500,      //選項卡容器寬度
        height:400,      //選項卡容器高度
        border:false      //設置為 true 時，顯示選項卡容器邊框。默認值 true。
    });
});

 

scrollIncrement   number 選項卡滾動條每次滾動的像素值。默認值100。也就是按鈕滾動的像素，按鈕少時結合tabWidth屬性使用

 

$(function () {
    $('#box').tabs({
        width:500,      //選項卡容器寬度
        height:400,      //選項卡容器高度
        tabWidth:300,    //設置按鈕寬度
        scrollIncrement:50      //選項卡滾動條每次滾動的像素值。默認值100
    });
});

 

scrollDuration   number 每次滾動動畫持續的時間，單位：毫秒。默認值400。也就是按鈕滾動的速度

$(function () {
    $('#box').tabs({
        width:500,      //選項卡容器寬度
        height:400,      //選項卡容器高度
        tabWidth:300,    //設置按鈕寬度
        scrollIncrement:50,      //選項卡滾動條每次滾動的像素值。默認值100
        scrollDuration:500      //每次滾動動畫持續的時間，單位：毫秒。默認值400。
    });
});

 

tools   array,selector工具欄添加在選項卡面板頭的左側或右側。可用的值有：1. 一個工具菜單數組，每個工具選項都和 linkbutton 相同。2. 一個指向<div/>容器工具菜單的選擇器。默認值null。

給選項卡頭部設置工具欄，接收一個數組，數組里接收一個對象，對象里是鍵值對設置圖標和點擊事件

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400,      //選項卡容器高度
        tools: [{           //給選項卡頭部設置工具欄，接收一個數組，數組里接收一個對象，對象里是鍵值對設置圖標和點擊事件
            iconCls: 'icon-add',
            handler: function () {
                alert('添加!');
            }
        }]
    });
});

 

toolPosition   string 工具欄位置。可用值：'left','right'。默認值 right。工具欄位置

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400,      //選項卡容器高度
        tools: [{           //給選項卡頭部設置工具欄，接收一個數組，數組里接收一個對象，對象里是鍵值對設置圖標和點擊事件
            iconCls: 'icon-add',
            handler: function () {
                alert('添加!');
            }
        }],
        toolPosition:'left'     //工具欄位置。可用值：'left','right'。默認值 right。
    });
});

 

tabPosition   string選 項 卡 位 置 。 可 用 值 ：'top','bottom','left','right'。默認值：top。按鈕位置

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400,      //選項卡容器高度
        tabPosition:'bottom' //string選 項 卡 位 置 。 可 用 值 ：'top','bottom','left','right'。默認值：top。按鈕位置
    });
});

 

headerWidth   number選項卡標題寬度，在 tabPosition 屬性設置為'left'或'right'的時候才有效。默認值：150。設置按鈕標題寬度，只有在按鈕設置左或者右的時候有效

 

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400,      //選項卡容器高度
        tabPosition:'left',
        headerWidth:50     //選項卡標題寬度，在 tabPosition 屬性設置為'left'或'right'的時候才有效。默認值：150。設置按鈕寬度
    });
});

 

 

tabWidth   number 標簽條的寬度。默認值：auto。設置按鈕寬度

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400,      //選項卡容器高度
        tabWidth:200    //標簽條的寬度。默認值：auto。
    });
});

 

tabHeight   number 標簽條的高度。默認值：27。設置按鈕高度

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400,      //選項卡容器高度
        tabWidth:200,    //標簽條的寬度。默認值：auto。
        tabHeight:100   //標簽條的高度。默認值：27。
    });
});

 

selected   number 初始化選中一個 tab 頁。默認值：0。默認選擇，值為索引

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400,      //選項卡容器高度
        selected:1      //初始化選中一個 tab 頁。默認值：0。默認選擇值為索引
    });
});

 

showHeader   boolean 設置為 true 時，顯示 tab 頁標題。默認值：true。是否顯示按鈕

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400,      //選項卡容器高度
        selected:1,      //初始化選中一個 tab 頁。默認值：0。默認選擇值為索引
        showHeader :false   //設置為 true 時，顯示 tab 頁標題。默認值：true。是否顯示按鈕
    });
});

 

 

三．事件列表

onLoad  panel 在 ajax 選項卡面板加載完遠程數據的時候觸發。

 

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400,      //選項卡容器高度
        onLoad:function (panel) {
            alert('在 ajax 選項卡面板加載完遠程數據的時候觸發。');
            alert('接收當前選項卡的對象' + panel);
        }
    });
    $('#box').tabs('add',{      //添加一個新選項卡面板
        id:'xmb',           //設置新增id
        title:'新按鈕',      //設置新增按鈕標題
        content:'新內容',     //設置新增內容
        href :'is_user.php'  //加載一個外部文件
        //更多見第五節
    });
});

 

 

 

onSelect title,index 用戶在選擇一個選項卡面板的時候觸發。title,index分別接收選擇的按鈕標題和按鈕索引

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400,      //選項卡容器高度
        onSelect:function (title,index) {
            alert('用戶在選擇一個選項卡面板的時候觸發。');
            alert('接收選擇的按鈕標題'+title);
            alert('接收選擇的按鈕索引'+index);
        }
    });
});

 

onUnselect   title,index 用戶在取消選擇一個選項卡面板的時候觸發。title,index分別接收選擇的上一個按鈕標題和按鈕索引

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400,      //選項卡容器高度
        onUnselect:function (title,index) {
            alert('用戶在取消選擇一個選項卡面板的時候觸發。');
            alert('接收選擇的上一個按鈕標題'+title);
            alert('接收選擇的上一個按鈕索引'+index);
        }
    });
});

 

onBeforeClose   title,index在選項卡面板關閉的時候觸發，返回false 取消關閉操作。下面的例子展示了在關閉選項卡面板之前以何種方式顯示確認對話框。

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400,      //選項卡容器高度
        onBeforeClose:function (title,index) {
            alert('在選項卡面板關閉的時候觸發');
            alert('接收選擇的關閉按鈕標題'+title);
            alert('接收選擇的關閉按鈕索引'+index);
        }
    });
});

 

onClose   title,index 在用戶關閉一個選項卡面板之后觸發。

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400,      //選項卡容器高度
        onClose:function (title,index) {
            alert('在用戶關閉一個選項卡面板之后觸發。');
            alert('接收選擇的關閉按鈕標題'+title);
            alert('接收選擇的關閉按鈕索引'+index);
        }
    });
});

 

onAdd   title,index 在添加一個新選項卡面板的時候觸發。

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400,      //選項卡容器高度
        onAdd:function (title,index) {   //在添加一個新選項卡面板的時候觸發。
            alert('獲取新添加的面板標題：'+ title + '|' + '獲取新添加的面板索引：' + index);
        }
    });
    $('#box').tabs('add',{      //添加一個新選項卡面板
        id:'xmb',           //設置新增id
        title:'新按鈕',      //設置新增按鈕標題
        content:'新內容'     //設置新增內容
        //更多見第五節
    });
});

 

onUpdate   title,index 在更新一個選項卡面板的時候觸發。修改時觸發

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400,      //選項卡容器高度
        onUpdate:function (title,index) {
            alert('修改時觸發');
            alert(title + '|' + index);  //接收選項卡的按鈕和索引
        }
    });
    $('#box').tabs('update',{
        tab:$('#cfh'),  //要修改的面板id
        options:{       //要修改的屬性
            title:'修改標題'
        }
    });
});

 

onContextMenu   e,title,index 在右鍵點擊一個選項卡面板的時候觸發。

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400,      //選項卡容器高度
        onContextMenu:function (e,title,index) {
            alert('在右鍵點擊一個選項卡面板的時候觸發。');
            alert('接收右鍵點擊按鈕標題'+title);
            alert('接收右鍵點擊按鈕索引'+index);
        }
    });
});

 

 

四．方法列表 Tabs 方法

 

options   none 返回選項卡屬性。

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400,      //選項卡容器高度
    });
    alert($('#box').tabs('options'));  //返回選項卡屬性。
});

 

tabs   none 返回所有選項卡面板。也就是返回所有按鈕對象

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400,      //選項卡容器高度
    });
    alert($('#box').tabs('tabs'));  //返回所有選項卡面板。也就是返回所有按鈕對象
});

 

resize   none 調整選項卡容器大小和布局。也就是選項卡如果因為什么原因變形了，可以重置這個選項卡

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400,      //選項卡容器高度
    });
    alert($('#box').tabs('resize'));  //也就是選項卡如果因為什么原因變形了，可以重置這個選項卡
});

 

add   options添加一個新選項卡面板，選項參數是一個配置對象，查看選項卡面板屬性的更多細節。在添加一個新選項卡面板的時候它將變成可選的。添加一個非選中狀態的選項卡面板時，記得設

置'selected'屬性為 false。第二個參數是一個對象，以鍵值對方式設置新增的面板屬性，詳情見第五節選項卡面板

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400,      //選項卡容器高度
    });
    $('#box').tabs('add',{      //添加一個新選項卡面板
        id:'xmb',           //設置新增id
        title:'新按鈕',      //設置新增按鈕標題
        content:'新內容'     //設置新增內容
        //更多見第五節
    });
});

 

close   which關閉一個選項卡面板，'which'參數可以是選項卡面板的標題或者索引，以指定要關閉的面板。

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400      //選項卡容器高度
    });
    $('#box').tabs('close',1);  //關閉一個選項卡面板，'which'參數可以是選項卡面板的標題或者索引，以指定要關閉的面板。
});

 

getTab   which 獲取指定選項卡面板，'which'參數可以是選項卡面板的標題或者索引。獲取指定選項卡面板對象

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400      //選項卡容器高度
    });
    alert($('#box').tabs('getTab',1));  //which 獲取指定選項卡面板，'which'參數可以是選項卡面板的標題或者索引。
});

 

getTabIndex   tab 獲取指定選項卡面板的索引。獲取指定id的按鈕索引

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400      //選項卡容器高度
    });
    alert($('#box').tabs('getTabIndex','#cfh'));  //獲取指定選項卡面板的索引
});

 

getSelected   none獲取選擇的選項卡面板。下面的例子展示了如何獲取選擇的選項卡面板索引。獲取以選定的選項卡面板對象

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400      //選項卡容器高度
    });
    alert($('#box').tabs('getSelected'));  //獲取指定選項卡面板的對象
});

 

select   which 選擇一個選項卡面板，'which'參數可以是選項卡面板的標題或者索引。選擇一個選項卡面板

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400      //選項卡容器高度
    });
    $('#box').tabs('select',1);  //選擇一個選項卡面板
});

 

unselect   which 取消選擇一個選項卡面板，'which'參數可以是選項卡面板的標題或者索引。取消選擇的選項卡

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400      //選項卡容器高度
    });
    $('#box').tabs('unselect',0);  //取消選擇的選項卡
});

 

showHeader   none 顯示選項卡的標簽頭。

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400      //選項卡容器高度
    });
    $('#box').tabs('showHeader');  //顯示選項卡的標簽頭。
});

 

hideHeader   none 隱藏選項卡的標簽頭。

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400      //選項卡容器高度
    });
    $('#box').tabs('hideHeader');  //隱藏選項卡的標簽頭
});

 

exists   which 表明指定的面板是否存在，'which'參數可以是選項卡面板的標題或索引。指定的面板是否存在，返回布爾值

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400      //選項卡容器高度
    });
    alert($('#box').tabs('exists',4));  //指定的面板是否存在
});

 

update   param更新指定的選項卡面板，'param'參數包含2個屬性：tab：要更新的選項卡面板。options：面板的屬性。修改面板

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400      //選項卡容器高度
    });
    $('#box').tabs('update',{
        tab:$('#cfh'),  //要修改的面板id
        options:{       //要修改的屬性
            title:'修改標題'
        }
    });
});

 

enableTab   which 啟用指定的選項卡面板，'which'參數可以是選項卡面板的標題或索引。

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400      //選項卡容器高度
    });
    $('#box').tabs('disableTab',1);  //禁用指定的選項卡面板
    $('#box').tabs('enableTab',1);  //啟用指定的選項卡面板
});

 

disableTab   which 禁用指定的選項卡面板，'which'參數可以是選項卡面板的標題或索引。

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400      //選項卡容器高度
    });
    $('#box').tabs('disableTab',1);  //禁用指定的選項卡面板
});

 

scrollBy   deltaX 滾動選項卡標題指定的像素數量，負值則向右滾動，正值則向左滾動。就是網頁一打開滾動選項卡移動多少

$(function () {
    $('#box').tabs({
        width: 500,      //選項卡容器寬度
        height: 400,      //選項卡容器高度
        tabWidth:200
    });
    $('#box').tabs('scrollBy',1);  //滾動選項卡標題指定的像素數量，負值則向右滾動，正值則向左滾動
});

 

五．選項卡面板，以下一般是在新增選項卡時使用

給選項卡屬性一樣的下面就不舉例了

選項卡面板繼承了 panel 一些屬性，以下是公共屬性。

id   string 選項卡面板的 ID 屬性。默認值 null。

title   string 選項卡面板的標題文本。默認值空。

content   string 選項卡面板的內容。默認值空。

href   string 從 URL 加載遠程數據內容填充到選項卡面板。默認值 null。

cache   boolean 如果為 true，在'href'屬性設置了有效值的時候緩存選項卡面板。默認值 true。

iconCls  string 定義了一個圖標的 CSS 類 ID 顯示到選項卡面板標題。默認值 null。

width   number 選項卡面板寬度。默認值 auto。

height   number 選項卡面板高度。默認值 auto。

collapsible   boolean 如果為 true，則允許選項卡摺疊。默認值false。

 

 

closable   boolean設置為 true 時，選項卡面板將顯示一個關閉按鈕，在點擊的時候會關閉選項卡面板。默認為 false。

selected   boolean 設置為 true 時，選項卡面板會被選中。默認為 false。