使用layui-tree美化左侧菜单的方法

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知识请关注layui使用教程栏目。