Tabs组件

Tabs组件概述

• 选项卡显示一批面板
• 但在同一个时间只会显示一个面板。每个选项卡面板都有标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮

使用Tabs组件

css 玩法

<div id="tt" 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>

js 玩法

<div id="myTabs" class="easyui-tabs">
    <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>

<script>
    $(function () {
        $("#myTabs").tabs({
            // 宽度
            width: 500,
            // 高度
            height: 500,
            // 为true时，将不显示控制面板背景
            plain: true,
            // 设置为true时，选项卡的大小将铺满它所在的容器
            fit: true,
            // 设置为true时，显示选项卡容器边框
            border: true,
            // toolPosition
            tabPosition: 'top',
            // headerWidth,选项卡标题宽度，为'left'或'right'有效
            headerWidth: 'left',
            // 工具栏添加在选项卡面板头的左侧或右侧
            tools: [
                {
                    iconCls: 'icon-add',
                    handler: function () {
                        alert('添加')
                    }
                },
                {
                    iconCls: 'icon-remove',
                    handler: function () {
                        alert('移除')
                    }
                }
            ]
        })
    });
</script>

添加与删除标签

<div id="myTabs" class="easyui-tabs">
    <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>

<script>
    $(function () {
        let i = 0;
        $("#myTabs").tabs({
            // 宽度
            width: 500,
            // 高度
            height: 500,
            // 为true时，将不显示控制面板背景
            plain: true,
            // 设置为true时，选项卡的大小将铺满它所在的容器
            fit: false,
            // 设置为true时，显示选项卡容器边框
            border: true,
            // toolPosition
            tabPosition: 'left',
            // headerWidth,选项卡标题宽度，为'left'或'right'有效
            headerWidth: 'left',
            // 工具栏添加在选项卡面板头的左侧或右侧
            tools: [
                {
                    iconCls: 'icon-add',
                    handler: function () {
                        $("#myTabs").tabs("add", {
                            title: '选项卡' + i,
                            selected: true,
                            closable: true,
                            content: "选项卡内容" + i++
                        });
                    }
                },
                {
                    iconCls: 'icon-remove',
                    handler: function () {
                        // 1.获取选中的选项卡
                        let tab = $("#myTabs").tabs("getSelected");
                        // 2.获取选项卡的索引
                        let index = $("#myTabs").tabs("getTabIndex", tab);
                        // 3.关闭选项卡
                        $("#myTabs").tabs("close", index);
                    }
                }
            ]
        });
    });
</script>