layui-tree美化左侧菜单
<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的使用刚刚开始，记录所采之坑，采坑继续进行中。。。