Layui-Tab详解

Layui是一款简约的前端UI框架，作为该框架的一种基础组件，layui-tab在网站开发中具有非常重要的作用，本文将从不同方面详细介绍layui-tab的使用方法和注意事项。

一、监听layuitable tool事件

作为表格组件的一部分，layuitable可以监听很多事件，这里介绍其中的一种——监听tool事件。在表格每一行右侧出现的操作栏上，如果有“点击事件”这个td用layer.open方法来弹出一个窗口，这时可以通过监听tool事件来实现这个功能。

layui.use('table', function () {
            var table = layui.table;
            table.render({
                elem: '#demo',
                url: '/demo/table/user/', 
                parseData: function (res) {
                    return {
                        "code": res.responseCode,
                        "msg": res.message,
                        "count": res.data.total, 
                        "data": res.data.list   
                    }
                },
                cols: [[
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'id', title: '编号', width: 80},
                    {field: 'username', title: '用户名', width: 120},
                    {field: 'sex', title: '性别', width: 80},
                    {field: 'city', title: '城市', width: 100},
                    {field: 'sign', title: '签名', width: 120},
                    {field: 'experience', title: '积分', width: 80},
                    {field: 'score', title: '评分', width: 80},
                    {field: 'classify', title: '职业', width: 100},
                    {title: '操作', width: 200, align: 'center', toolbar: '#barDemo'}
                ]]
            });

            table.on('tool(demo)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.msg('User Id：' + data.id);
                } else if (obj.event === 'edit') {
                    layer.alert('编辑行：
' + JSON.stringify(data))
                } else if (obj.event === 'delete') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        layer.close(index);
                    });
                }
                //自定义事件
                else if (obj.event === 'openWin') {
                    //数据回显与添加操作完全一致，只是修改动态生成的window的标题和按钮名称，同时也需要在回传数据的时候判断处理一下了
                    var index = layer.open({
                        type: 1
                        , title: '考试科目'
                        , area: ['550px', '400px']
                        , content: $('#LAYdemoFormMemor').html()
                        , shadeClose: false
                        , btn: ['确定']
                        , success: function (layero, index) {
                            if (data) {
                                //表单赋值
                                form.val("formFilterName", data);
                            }
                        }
                        , yes: function (index, layero) {
                            var formObj = $(layero).find(".layui-form");
                            //提交表单
                            formObj.submit();
                        }
                    });
                }
            });

        });

二、动态添加tab项

layui-tab支持通过JS动态添加、删除tab项，这样可以更加灵活的根据不同需求进行页面构建。

layui.use('element', function () {
            var element = layui.element;

            //动态添加tab
            $("#tabAdd").click(function () {
                var $title = $(this).attr("title");
                var $url = $(this).attr("href");
                var $id = $(this).data("tabid");
                //先判断一下这个标题的选项卡是否已经存在，如果已经存在，则直接切换到该选项卡
                for (var i = 0; i < $(".layui-tab-title li[lay-id]").length; i++) {
                    if ($(".layui-tab-title li[lay-id]").eq(i).attr("lay-id") === $id) {
                        element.tabChange("demo", $id);
                        return;
                    }
                }
                //如果选项卡不存在，则创建一个新的选项卡，并且进行切换
                element.tabAdd("demo", {
                    title: $title,
                    content: "",
                    id: $id
                });
                element.tabChange("demo", $id);
            });
            //监听选项卡删除事件
            element.on("tabDelete(demo)", function (data) {
                console.log(data);
            });
        });

三、选项卡操作动画效果

在页面布局时，选项卡的动画效果同样是一个重要的考虑因素，一个流畅自然的动画可以提升用户体验。这里提供三种不同的动画方式。

//切换选项卡时，使用fade效果
element.tabChange("test", id); //切换选项卡
element.tabDelete("test", id); //删除选项卡
//代码缩进有误，仅作代码示例
element.tabChange("test", id, {
       ani: 6, //动画效果
       tabDelete: function (id) {} //删除时回调函数
 });
 element.tabDelete("test", id, {
        auth: function (ids) {   //关闭时调用的函数
          console.log(ids);
          return false;//返回false，阻止关闭
        }
 });
//渐隐渐现效果
element.tabChange("test", id, {
        ani: layui.event.anim('fade') //调用layui内置动画
 });
//frame缩放飞入
element.tabChange("test", id, {
        ani: layui.event.anim('updown') //调用layui内置动画
 });

四、选项卡切换

选项卡的切换也是常见需求之一，这里介绍两种切换方式。

// 选项卡切换：通过id
var element = layui.element;
element.tabChange('demo', 'newTab');

// 选项卡删除: 通过id
element.tabDelete('demo', 'newTab');

五、选项卡普通配置

一些基本配置项：

element.tab({
    headerElem: 'ul.layui-tab-title' //默认选项卡头的选择器
    ,bodyElem: 'div.layui-tab-content' //选项卡体的选择器
    ,item: 'li' //选项卡元素的选择器
    ,content: 'div' //选项卡内容的选择器
 });

六、总结

通过本文的介绍，读者可以看到layui-tab在页面布局和操作中所具有的各种特性和强大的功能，能够满足大部分前端开发时的需求。希望本文可以给读者提供帮助，也欢迎大家一同探讨和交流。