怎样运用layui-tree实现美化左侧菜单
怎样运用layui-tree实现美化左侧菜单?针对这个问题,这篇文章给出了相对应的分析和解答,希望能帮助更多想解决这个问题的朋友找到更加简单易行的办法。
成都做网站、成都网站制作、成都外贸网站建设服务团队是一支充满着热情的团队,执着、敏锐、追求更好,是创新互联的标准与要求,同时竭诚为客户提供服务是我们的理念。创新互联把每个网站当做一个产品来开发,精雕细琢,追求一名工匠心中的细致,我们更用心!
layui-tree实现左侧菜单
html
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.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: '' //支持传入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实现美化左侧菜单的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
文章题目:怎样运用layui-tree实现美化左侧菜单
网站URL:http://pwwzsj.com/article/pgiiep.html