温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何使用layui-tree美化左侧菜单

发布时间:2021-09-23 15:31:12 来源:亿速云 阅读:133 作者:小新 栏目:开发技术

这篇文章将为大家详细讲解有关如何使用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-tree美化左侧菜单”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI