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在頁面布局和操作中所具有的各種特性和強大的功能，能夠滿足大部分前端開發時的需求。希望本文可以給讀者提供幫助，也歡迎大家一同探討和交流。