使用layui-tree美化左側菜單，點擊生成tab選項

layui-tree美化左側菜單

• html

<div class="layui-side layui-bg-black">
        <div class="layui-side-scroll " >
            <div id="sidemenubar" lay-filter="test"></div>
        </div>
</div>

• css

/*左側導航*/
.layui-tree-skin-sidebar li i{
    color: rgba(255,255,255,.7);
    display: none;
}
.layui-tree-skin-sidebar li a cite{
    color: rgba(255,255,255,.7)
}
.layui-tree-skin-sidebar li .layui-tree-spread{
    display: block;
    position: absolute;
    right: 30px;
}
.layui-tree-skin-sidebar li{
    line-height: 45px;
    position: relative;
}
.layui-tree-skin-sidebar li ul{
    margin-left: 0;
    background: rgba(0,0,0,.3);
}
.layui-tree-skin-sidebar li ul a{
    padding-left: 20px;
}
.layui-tree-skin-sidebar li a{
    height: 45px;
    border-left: 5px solid transparent;
    box-sizing: border-box;
    width: 100%;
}
.layui-tree-skin-sidebar li a:hover{
    background: #4E5465;
    color: #fff;
    border-left: 5px solid #009688;
}
.layui-tree-skin-sidebar li a.active{
    background: #009688;
}

• js

<!--layui.js文件必須放到HTML內容的最后-->
<script src="layui/layui.js"></script>
layui.use(['element','layer','jquery','tree'], function(){
    var element = layui.element;
    var layer = layui.layer;
    var $ = layui.jquery;
    var menuData =  [ //節點
            {
                name: '常用文件夾'
                ,id: '1'
                ,children: [
                {
                    name: '所有未讀'
                    ,id: '11'
                    ,url: 'http://www.layui.com/'
                }, {
                    name: '置頂郵件'
                    ,id: '12'
                }, {
                    name: '標簽郵件'
                    ,id: '13'
                }
            ]
            }, {
                name: '我的郵箱'
                ,id: '2'
                ,children: [
                    {
                        name: 'QQ郵箱'
                        ,id: '21'
                        ,spread: true
                        ,children: [
                        {
                            name: '收件箱'
                            ,id: '211'
                            ,children: [
                            {
                                name: '所有未讀'
                                ,id: '2111'
                            }, {
                                name: '置頂郵件'
                                ,id: '2112'
                            }, {
                                name: '標簽郵件'
                                ,id: '2113'
                            }
                        ]
                        }, {
                            name: '已發出的郵件'
                            ,id: '212'
                        }, {
                            name: '垃圾郵件'
                            ,id: '213'
                        }
                    ]
                    }, {
                        name: '阿里雲郵'
                        ,id: '22'
                        ,children: [
                            {
                                name: '收件箱'
                                ,id: '221'
                            }, {
                                name: '已發出的郵件'
                                ,id: '222'
                            }, {
                                name: '垃圾郵件'
                                ,id: '223'
                            }
                        ]
                    }
                ]
            }
        ]
    layui.tree({
        elem: '#sidemenubar' //傳入元素選擇器
        ,skin: 'sidebar'  //自定義tree樣式的類名
        ,nodes:menuData  //節點數據
        ,click: function(node,item){
            //node即為當前點擊的節點數據,item就是被點擊的a標簽對象了
            //導航按鈕選中當前
            $('#sidemenubar a').removeClass('active');
            $(item).addClass('active');
            $(item).siblings('.layui-tree-spread').click();
            //添加新tab
            activeTab.init(node.name,node.url,node.id);
        }
    });
    var activeTab = {
        tabTit : '', //tab titile標題
        tabUrl : '', //tab內容嵌套iframe的src
        tabId  : '', //tab 標簽的lay-id
        tabCon : function(){
            var result;
            $.ajax({
                type: 'get',
                url: this.tabUrl,
                dataType: 'html',
                success: function(data){
                    result = data;
                }
            })
            return result;
        },
        addTab : function(){ //新增tab項
            element.tabAdd('demo', {
                title: this.tabTit
                ,content: '<iframe src = '+this.tabUrl +' ></iframe>' //支持傳入html
                ,id: this.tabId
            })
        },
        changeTab: function(){ //選中tab項
            element.tabChange('demo', this.tabId);
        },
        ishasTab : function(){ //判斷tab項中是否包含
            var _this = this;
            var dataId,isflag;
            var arrays = $('.layui-tab-title li');
            $.each(arrays,function(idx,ele){
                dataId = $(ele).attr('lay-id');
                if(dataId === _this.tabId){
                    isflag = true
                    return false
                }else{
                    isflag = false
                }
            })
            return isflag
        },
        init : function(tabtit,taburl,tabid){
            var _this = this;
            _this.tabUrl = taburl;
            _this.tabId = tabid;
            _this.tabTit = tabtit;
            if(taburl){
                if(!_this.ishasTab()){
                    _this.addTab();
                }
                _this.changeTab();
            }else{
                return false
            }
        }
    }
});

新增tab項邏輯思路

• 點擊左側導航，獲取它的數據（url，id。。。）
• 如果有url，則判斷其id是否與tab項的lay-id相同，相同則切換選中，不相同則新增

遇到的問題

layui-tree 單擊節點只返回當前的節點數據，不返回當前節點的HTML對象

解決方案

• 更改tree.js 源碼
  

e.children("a").on("click",
                    function(e) {
                        layui.stope(e),
                            i.click(o,this)
                    })
i.click(o)改為 i.click(o,this)

• 使用
  

結語

layui的使用剛剛開始，記錄所采之坑，采坑繼續進行中。。。