网站前端_EasyUI.基础入门.0006.带你玩转jQuery EasyUI Tabs组件 ?
更新:HHH   时间:2023-1-7


简单介绍:


说明: ($fn.tabs)选项卡,依赖panel和linkbutton组件,常作为面板集合显示,但一次只能显示一个,每个Tab面板都拥有头部标题和一些工具按钮,包括关闭按钮和自定义按钮.


基础用法:


<div id="tt" class="easyui-tabs" >
    <div  data-options="title:'Tab_1标题',closable:true">Tab_1主题</div>
    <div  data-options="title:'Tab_2标题',closable:true">Tab_2主题</div>
    <div  data-options="title:'Tab_3标题',closable:true">Tab_3主题</div>
</div>


容器属性:


width -> number

说明: 标签页Tab容器的宽度

height -> number

说明: 标签页Tab容器的高度

plain -> boolean

说明: 是否不显示标签页Tab背景

fit -> boolean

说明: 标签页Tab容器尺寸是否适应它的父容器.

border -> boolean

说明: 是否显示标签页Tab容器边框

scrollIncrement -> number

说明: 当标签页Tab所有宽度超出容器宽度时,两端会出现滚动按钮,可设置每按一次Tab滚动按钮,滚动的像素数,默认100

scrollDuration -> number

说明: 当标签页Tab所有宽度超出容器宽度时,两端会出现滚动按钮,可设置每一个滚动动画应该持续的毫秒数,默认100

tools -> array/selector

说明: 放置在头部的左侧或右侧工具栏,当为数组时,数组元素需要包含iconCls和handler属性,当为选择器时可通过已有的DOM容器定义工具

toolPosition -> string

说明: 工具栏位置,支持left和right,默认为right

tabPosition -> string

说明: 标签页Tab位置,支持left和right和top和bottom,默认为top


<div id="tt" class="easyui-tabs"  data-options="tools:'#tools',toolPosition:'right',tabPosition:'left'">
    <div  data-options="title:'Tab_1标题',closable:true">Tab_1主题</div>
    <div  data-options="title:'Tab_2标题',closable:true">Tab_2主题</div>
    <div  data-options="title:'Tab_3标题',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

说明: 标签页Tab头部宽度,只有tabPosition设置为left或right时才有效

tabWidth -> number

说明: 标签页Tab头部宽度,只有tabPosition设置为top或bottom时才有效,超出容器宽度,两端会出现滚动按钮

tabHeight -> number

说明: 标签页Tab头部高度,只有tabPosition设置为top或bottom时才有效

selected -> number

说明: 默认选中指定标签页Tab,索引从0开始

showHeader -> boolean

说明: 是否显示标签页Tab头部


容器事件:


onLoad -> function(panel)

说明: 当一个Ajax标签页面板Panel完成加载远程数据时触发

onSelect -> function(title,index)

说明: 当用户选择一个标签页面板Panel时触发

onUnselect -> function(title,index)

说明: 当用户未选择一个标签页面板Panel时触发

onBeforeClose -> function(title,index)

说明: 当一个标签页面板Panel被关闭时触发,返回false就取消关闭动作


<div id="t" class="easyui-tabs"  data-options="">
    <div  data-options="title:'Tab_1标题',closable:true,href:'/easyui/data.json'"></div>
    <div  data-options="title:'Tab_2标题',closable:true">Tab_2主题</div>
    <div  data-options="title:'Tab_3标题',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: 标题['+title+'],索引为['+index+']的面板被选中!');
        },
        onUnselect:function(title,index){
            console.log('notice: 标题['+title+'],索引为['+index+']的面板被取消选中!');
        },
        onBeforeClose:function(title,index){
            var target = this;
            $.messager.confirm('警告', '确认要关闭'+title+'?', function(res){
                if(res){
                    // 当确认要关闭时先保存原来配置对象的onBeforeClose然后替换然后调用其关闭方法,然后再还原
                    var options = $(target).tabs('options');
                    var oldOnBeforeClose = options.onBeforeClose;
                    options.onBeforeClose=function(){return true};
                    $(target).tabs('close', title);
                    options.onBeforeClose = oldOnBeforeClose;
                };
            });
            // 默认不允许所有的选项卡Tab被关闭
            return false;
        }
    };
    $('#t').tabs(options);
</script>

onClose -> function(title,index)

说明: 当用户关闭一个标签面板Panel后触发

onAdd -> function(title,index)

说明: 当一个新的标签页面板Panel被添加时触发

onUpdate -> function(title,index)

说明: 当一个标签页面板Panel被更新时触发

onContextMenu(e,title,index)

说明: 当一个标签页面板Panel被右键点击时触发


<div>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$('#t').tabs('add', {title:'Tab_4标题',selected:false,content:'新增标签页'})">添加标签页</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$('#t').tabs('update', {tab:$('#t').tabs('getSelected'),options:{content:'数据被更新'}})">更新选中标签页</a>
</div>
<hr>
<div id="t" class="easyui-tabs"  data-options="">
    <div  data-options="title:'Tab_1标题',closable:true,href:'/easyui/data.json'"></div>
    <div  data-options="title:'Tab_2标题',closable:true">Tab_2主题</div>
    <div  data-options="title:'Tab_3标题',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: 标题为'+title+'编号为'+index+'的选项卡被关闭');
        },
        onAdd:function(title,index){
            console.log('notice: 标题为'+title+'编号为'+index+'的选项卡被创建');
        },
        onUpdate:function(title,index){
            console.log('notice: 标题为'+title+'编号为'+index+'的选项卡被更新');
        },
        onContextMenu:function(e,title,index){
            console.log('notice: 标题为'+title+'编号为'+index+'的选项卡被右键');
        }
    };
    $('#t').tabs(options);
</script>


容器接口:


options -> object

说明: 返回标签页容器选项

tabs -> array

说明: 返回全部的标签页面板

resize -> object

说明: 调整标签页容器的尺寸并做布局

add -> object

说明: 添加一个新的标签页面板,需要传递options配置对象参数,具体参考标签页面板属性,当添加一个新的标签页面板时会默认被选中,如果不想被选中可在配置对象中添加selected:false;

close -> object

说明: 关闭一个标签页面板,需要传递的which参数可以是要被关闭的标签页面板的标题title或索引index

getTab -> object

说明: 获取指定的标签页面板,需要传递的which参数可以是标签页面板的标题title或索引index

getTabIndex -> object

说明: 获取指定标签页面板索引

getSelected -> object

说明: 获取选中的标签页面板

select -> object

说明: 选中一个标签页面板,需要传递的参数which可以是标签页面板的标题title或索引index

unselect -> object

说明: 取消选择一个标签页面板,需要传递的参数which可以是标签页面板的标题title或索引index

showHeader -> object

说明: 显示标签页头部

hideHeader -> object

说明: 隐藏标签页头部

exists -> object

说明: 指定面板是否存在,需要传递的参数which可以是标签页面板的标题title或索引index

update -> object

说明: 更新指定标签页面板,需要传递的param需要包含两个参数tab(标签页面板)和options(面板的配置对象)

enableTab -> object

说明: 启用指定的标签页面板,需要传递的参数which可以是标签页面板的标题title或索引index

disableTab -> object

说明: 禁用指定的标签页面板,需要传递的参数which可以是标签页面板的标题title或索引index

scrollBy -> object

说明: 通过指定像素数滚动标签页头部,负数表示到右边,正值表示向左边


<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'));">调整尺寸</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($('#t').tabs('add', {title:'Tab_4标题',closable:true,href:'/easyui/data.json',selected:false,bodyCls:'tabbody'}));">添加标签页</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($('#t').tabs('close', $('#t').tabs('tabs').length-1));">关闭最后一个标签页</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($('#t').tabs('getTab', $('#t').tabs('tabs').length-1));">获取最后一个标签页</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($('#t').tabs('getTabIndex', $('#t').tabs('getSelected')));">获取选中标签页索引</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($('#t').tabs('select', $('#t').tabs('tabs').length-1));">选中最后一个标签页</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:console.log($('#t').tabs('unselect', $('#t').tabs('getSelected')));">取消选择选中标签页</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');
        };
    })()">切换显示标签页头部</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$('#t').tabs('getSelected').panel('refresh', '/easyui/data.json')">刷新选中标签页内容</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$('#t').tabs('update', {tab:$('#t').tabs('getSelected'),options:{content:'更新数据'}})">更新选中标签页内容</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$('#t').tabs('disableTab', $('#t').tabs('getTabIndex', $('#t').tabs('getSelected')))">禁用被选中标签页</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$('#t').tabs('enableTab', $('#t').tabs('getTabIndex', $('#t').tabs('getSelected')))">启用被选中标签页</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" onclick="javascript:$('#t').tabs('scrollBy', 100)">右移所有的选项卡</a>
</div>
<hr>
<div id="t" class="easyui-tabs"  data-options="tabWidth:300">
    <div  data-options="title:'Tab_1标题',closable:true,href:'/easyui/data.json'"></div>
    <div  data-options="title:'Tab_2标题',closable:true">Tab_2主题</div>
    <div  data-options="title:'Tab_3标题',closable:true">Tab_3主题</div>
</div>


面板属性(附加):


closable -> boolean

说明: 当显示为true时,标签页面板将显示一个关闭按钮,点击就能关闭这个面板

selected -> boolean

说明: 当设置为true时,标签页面板被选中.

返回web开发教程...