網(wǎng)站前端_EasyUI.基礎(chǔ)入門.0006.帶你玩轉(zhuǎn)jQuery EasyUI Tabs組件 ?

簡單介紹:

說明: ($fn.tabs)選項(xiàng)卡,依賴panel和linkbutton組件,常作為面板集合顯示,但一次只能顯示一個(gè),每個(gè)Tab面板都擁有頭部標(biāo)題和一些工具按鈕,包括關(guān)閉按鈕和自定義按鈕.

基礎(chǔ)用法:

<div id="tt" class="easyui-tabs" >
    <div  data-options="title:'Tab_1標(biāo)題',closable:true">Tab_1主題</div>
    <div  data-options="title:'Tab_2標(biāo)題',closable:true">Tab_2主題</div>
    <div  data-options="title:'Tab_3標(biāo)題',closable:true">Tab_3主題</div>
</div>

容器屬性:

width -> number

說明: 標(biāo)簽頁Tab容器的寬度

height -> number

說明: 標(biāo)簽頁Tab容器的高度

plain -> boolean

說明: 是否不顯示標(biāo)簽頁Tab背景

fit -> boolean

說明: 標(biāo)簽頁Tab容器尺寸是否適應(yīng)它的父容器.

border -> boolean

說明: 是否顯示標(biāo)簽頁Tab容器邊框

scrollIncrement -> number

說明: 當(dāng)標(biāo)簽頁Tab所有寬度超出容器寬度時(shí),兩端會(huì)出現(xiàn)滾動(dòng)按鈕,可設(shè)置每按一次Tab滾動(dòng)按鈕,滾動(dòng)的像素?cái)?shù),默認(rèn)100

scrollDuration -> number

說明: 當(dāng)標(biāo)簽頁Tab所有寬度超出容器寬度時(shí),兩端會(huì)出現(xiàn)滾動(dòng)按鈕,可設(shè)置每一個(gè)滾動(dòng)動(dòng)畫應(yīng)該持續(xù)的毫秒數(shù),默認(rèn)100

tools -> array/selector

說明: 放置在頭部的左側(cè)或右側(cè)工具欄,當(dāng)為數(shù)組時(shí),數(shù)組元素需要包含iconCls和handler屬性,當(dāng)為選擇器時(shí)可通過已有的DOM容器定義工具

toolPosition -> string

說明: 工具欄位置,支持left和right,默認(rèn)為right

tabPosition -> string

說明: 標(biāo)簽頁Tab位置,支持left和right和top和bottom,默認(rèn)為top

<div id="tt" class="easyui-tabs"  data-options="tools:'#tools',toolPosition:'right',tabPosition:'left'">
    <div  data-options="title:'Tab_1標(biāo)題',closable:true">Tab_1主題</div>
    <div  data-options="title:'Tab_2標(biāo)題',closable:true">Tab_2主題</div>
    <div  data-options="title:'Tab_3標(biāo)題',closable:true">Tab_3主題</div>
</div>
<div id="tools">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'"></a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'"></a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'"></a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help'"></a>
</div>

headerWidth -> number

說明: 標(biāo)簽頁Tab頭部寬度,只有tabPosition設(shè)置為left或right時(shí)才有效

tabWidth -> number

說明: 標(biāo)簽頁Tab頭部寬度,只有tabPosition設(shè)置為top或bottom時(shí)才有效,超出容器寬度,兩端會(huì)出現(xiàn)滾動(dòng)按鈕

tabHeight -> number

說明: 標(biāo)簽頁Tab頭部高度,只有tabPosition設(shè)置為top或bottom時(shí)才有效

selected -> number

說明: 默認(rèn)選中指定標(biāo)簽頁Tab,索引從0開始

showHeader -> boolean

說明: 是否顯示標(biāo)簽頁Tab頭部

容器事件:

onLoad -> function(panel)

說明: 當(dāng)一個(gè)Ajax標(biāo)簽頁面板Panel完成加載遠(yuǎn)程數(shù)據(jù)時(shí)觸發(fā)

onSelect -> function(title,index)

說明: 當(dāng)用戶選擇一個(gè)標(biāo)簽頁面板Panel時(shí)觸發(fā)

onUnselect -> function(title,index)

說明: 當(dāng)用戶未選擇一個(gè)標(biāo)簽頁面板Panel時(shí)觸發(fā)

onBeforeClose -> function(title,index)

說明: 當(dāng)一個(gè)標(biāo)簽頁面板Panel被關(guān)閉時(shí)觸發(fā),返回false就取消關(guān)閉動(dòng)作

<div id="t" class="easyui-tabs"  data-options="">
    <div  data-options="title:'Tab_1標(biāo)題',closable:true,href:'/easyui/data.json'"></div>
    <div  data-options="title:'Tab_2標(biāo)題',closable:true">Tab_2主題</div>
    <div  data-options="title:'Tab_3標(biāo)題',closable:true">Tab_3主題</div>
</div>
<!-- 說明: 加載jquery-easyui腳本文件 -->
<script src="js/jquery-easyui/jquery.min.js"></script>
<script src="js/jquery-easyui/jquery.easyui.min.js"></script>
<script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
    var options = {
        onLoad:function(panel){
            console.log(panel.html());
        },
        onSelect:function(title,index){
            console.log('notice: 標(biāo)題['+title+'],索引為['+index+']的面板被選中!');
        },
        onUnselect:function(title,index){
            console.log('notice: 標(biāo)題['+title+'],索引為['+index+']的面板被取消選中!');
        },
        onBeforeClose:function(title,index){
            var target = this;
            $.messager.confirm('警告', '確認(rèn)要關(guān)閉'+title+'?', function(res){
                if(res){
                    // 當(dāng)確認(rèn)要關(guān)閉時(shí)先保存原來配置對象的onBeforeClose然后替換然后調(diào)用其關(guān)閉方法,然后再還原
                    var options = $(target).tabs('options');
                    var oldOnBeforeClose = options.onBeforeClose;
                    options.onBeforeClose=function(){return true};
                    $(target).tabs('close', title);
                    options.onBeforeClose = oldOnBeforeClose;
                };
            });
            // 默認(rèn)不允許所有的選項(xiàng)卡Tab被關(guān)閉
            return false;
        }
    };
    $('#t').tabs(options);
</script>

onClose -> function(title,index)

說明: 當(dāng)用戶關(guān)閉一個(gè)標(biāo)簽面板Panel后觸發(fā)

onAdd -> function(title,index)

說明: 當(dāng)一個(gè)新的標(biāo)簽頁面板Panel被添加時(shí)觸發(fā)

onUpdate -> function(title,index)

說明: 當(dāng)一個(gè)標(biāo)簽頁面板Panel被更新時(shí)觸發(fā)

onContextMenu(e,title,index)

說明: 當(dāng)一個(gè)標(biāo)簽頁面板Panel被右鍵點(diǎn)擊時(shí)觸發(fā)

<div>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$('#t').tabs('add', {title:'Tab_4標(biāo)題',selected:false,content:'新增標(biāo)簽頁'})">添加標(biāo)簽頁</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$('#t').tabs('update', {tab:$('#t').tabs('getSelected'),options:{content:'數(shù)據(jù)被更新'}})">更新選中標(biāo)簽頁</a>
</div>
<hr>
<div id="t" class="easyui-tabs"  data-options="">
    <div  data-options="title:'Tab_1標(biāo)題',closable:true,href:'/easyui/data.json'"></div>
    <div  data-options="title:'Tab_2標(biāo)題',closable:true">Tab_2主題</div>
    <div  data-options="title:'Tab_3標(biāo)題',closable:true">Tab_3主題</div>
</div>
<!-- 說明: 加載jquery-easyui腳本文件 -->
<script src="js/jquery-easyui/jquery.min.js"></script>
<script src="js/jquery-easyui/jquery.easyui.min.js"></script>
<script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
    var options = {
        onClose:function(title,index){
            console.log('notice: 標(biāo)題為'+title+'編號為'+index+'的選項(xiàng)卡被關(guān)閉');
        },
        onAdd:function(title,index){
            console.log('notice: 標(biāo)題為'+title+'編號為'+index+'的選項(xiàng)卡被創(chuàng)建');
        },
        onUpdate:function(title,index){
            console.log('notice: 標(biāo)題為'+title+'編號為'+index+'的選項(xiàng)卡被更新');
        },
        onContextMenu:function(e,title,index){
            console.log('notice: 標(biāo)題為'+title+'編號為'+index+'的選項(xiàng)卡被右鍵');
        }
    };
    $('#t').tabs(options);
</script>

容器接口:

options -> object

說明: 返回標(biāo)簽頁容器選項(xiàng)

tabs -> array

說明: 返回全部的標(biāo)簽頁面板

resize -> object

說明: 調(diào)整標(biāo)簽頁容器的尺寸并做布局

add -> object

說明: 添加一個(gè)新的標(biāo)簽頁面板,需要傳遞options配置對象參數(shù),具體參考標(biāo)簽頁面板屬性,當(dāng)添加一個(gè)新的標(biāo)簽頁面板時(shí)會(huì)默認(rèn)被選中,如果不想被選中可在配置對象中添加selected:false;

close -> object

說明: 關(guān)閉一個(gè)標(biāo)簽頁面板,需要傳遞的which參數(shù)可以是要被關(guān)閉的標(biāo)簽頁面板的標(biāo)題title或索引index

getTab -> object

說明: 獲取指定的標(biāo)簽頁面板,需要傳遞的which參數(shù)可以是標(biāo)簽頁面板的標(biāo)題title或索引index

getTabIndex -> object

說明: 獲取指定標(biāo)簽頁面板索引

getSelected -> object

說明: 獲取選中的標(biāo)簽頁面板

select -> object

說明: 選中一個(gè)標(biāo)簽頁面板,需要傳遞的參數(shù)which可以是標(biāo)簽頁面板的標(biāo)題title或索引index

unselect -> object

說明: 取消選擇一個(gè)標(biāo)簽頁面板,需要傳遞的參數(shù)which可以是標(biāo)簽頁面板的標(biāo)題title或索引index

showHeader -> object

說明: 顯示標(biāo)簽頁頭部

hideHeader -> object

說明: 隱藏標(biāo)簽頁頭部

exists -> object

說明: 指定面板是否存在,需要傳遞的參數(shù)which可以是標(biāo)簽頁面板的標(biāo)題title或索引index

update -> object

說明: 更新指定標(biāo)簽頁面板,需要傳遞的param需要包含兩個(gè)參數(shù)tab(標(biāo)簽頁面板)和options(面板的配置對象)

enableTab -> object

說明: 啟用指定的標(biāo)簽頁面板,需要傳遞的參數(shù)which可以是標(biāo)簽頁面板的標(biāo)題title或索引index

disableTab -> object

說明: 禁用指定的標(biāo)簽頁面板,需要傳遞的參數(shù)which可以是標(biāo)簽頁面板的標(biāo)題title或索引index

scrollBy -> object

說明: 通過指定像素?cái)?shù)滾動(dòng)標(biāo)簽頁頭部,負(fù)數(shù)表示到右邊,正值表示向左邊

<div>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($('#t').tabs('options'));">獲取配置</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($('#t').tabs('tabs'));">獲取TABS</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($('#t').tabs('resize'));">調(diào)整尺寸</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($('#t').tabs('add', {title:'Tab_4標(biāo)題',closable:true,href:'/easyui/data.json',selected:false,bodyCls:'tabbody'}));">添加標(biāo)簽頁</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($('#t').tabs('close', $('#t').tabs('tabs').length-1));">關(guān)閉最后一個(gè)標(biāo)簽頁</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($('#t').tabs('getTab', $('#t').tabs('tabs').length-1));">獲取最后一個(gè)標(biāo)簽頁</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($('#t').tabs('getTabIndex', $('#t').tabs('getSelected')));">獲取選中標(biāo)簽頁索引</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($('#t').tabs('select', $('#t').tabs('tabs').length-1));">選中最后一個(gè)標(biāo)簽頁</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($('#t').tabs('unselect', $('#t').tabs('getSelected')));">取消選擇選中標(biāo)簽頁</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="(function(){
        var options = $('#t').tabs('options');
        if(options.showHeader){
            $('#t').tabs('hideHeader');
        }else{
            $('#t').tabs('showHeader');
        };
    })()">切換顯示標(biāo)簽頁頭部</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$('#t').tabs('getSelected').panel('refresh', '/easyui/data.json')">刷新選中標(biāo)簽頁內(nèi)容</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$('#t').tabs('update', {tab:$('#t').tabs('getSelected'),options:{content:'更新數(shù)據(jù)'}})">更新選中標(biāo)簽頁內(nèi)容</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$('#t').tabs('disableTab', $('#t').tabs('getTabIndex', $('#t').tabs('getSelected')))">禁用被選中標(biāo)簽頁</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$('#t').tabs('enableTab', $('#t').tabs('getTabIndex', $('#t').tabs('getSelected')))">啟用被選中標(biāo)簽頁</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$('#t').tabs('scrollBy', 100)">右移所有的選項(xiàng)卡</a>
</div>
<hr>
<div id="t" class="easyui-tabs"  data-options="tabWidth:300">
    <div  data-options="title:'Tab_1標(biāo)題',closable:true,href:'/easyui/data.json'"></div>
    <div  data-options="title:'Tab_2標(biāo)題',closable:true">Tab_2主題</div>
    <div  data-options="title:'Tab_3標(biāo)題',closable:true">Tab_3主題</div>
</div>

面板屬性(附加):

closable -> boolean

說明: 當(dāng)顯示為true時(shí),標(biāo)簽頁面板將顯示一個(gè)關(guān)閉按鈕,點(diǎn)擊就能關(guān)閉這個(gè)面板

selected -> boolean

說明: 當(dāng)設(shè)置為true時(shí),標(biāo)簽頁面板被選中.