- it技术
- layui添加菜单和动态操作tab
layui添加菜单和动态操作tab
代码一(使用模板引擎渲染菜单)代码二修改版
代码一(使用模板引擎渲染菜单)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜单和tab操作</title>
<script type="text/javascript" src="../lib/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../lib/layui/layui.js"></script>
<link rel="stylesheet" href="../lib/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">layui 后台布局</div>
<!-- 头部区域（可配合layui已有的水平导航） -->
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<!--加了 lay-shrink="all"这个属性则菜单 一个开启一个会折叠-->
<ul class="layui-nav layui-nav-tree" lay-filter="test" id="menuPanel" lay-shrink="all">
<!--挖出来的li-->
</ul>
</div>
</div>
<div class="layui-body">
<div class="layui-tab" lay-allowClose="true" lay-filter="menuTab">
<ul class="layui-tab-title">
<li class="layui-this">首页</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">首页</div>
</div>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
© layui.com - 底部固定区域
</div>
</div>
<!--定义我们要渲染的菜单模板 d代表得到的json串-->
<script type="text/html" id="menuTempPanel">
{{# for(let i=0;i<d.length;i++){ }}
<!--加了layui-nav-itemed 后默认展开 这儿不加-->
<li class="layui-nav-item ">
<a class="" href="javascript:;">{{ d[i].title}}</a>
<dl class="layui-nav-child">
{{# for(let j=0;j<d[i].children.length;j++){ }}
<dd>
<a class="menuItem" href="javascript:;" data-id="{{d[i].children[j].id}}" data-url="{{d[i].children[j].url}}">{{ d[i].children[j].title}}</a>
</dd>
{{# }}}
</dl>
</li>
{{# }}}
</script>
<script>
//JavaScript代码区域
layui.use(['element','laytpl'], function(){
let element = layui.element;
let laytpl=layui.laytpl;
//定义菜单json字符串
let menuJson=[
{id:1,title:'后台管理',url:'',children:[
{id: 11,title: '用户管理',url: 'https://www.baidu.com'},
{id: 12,title: '角色管理',url: ''},
{id: 13,title: '部门管理',url: ''},
{id: 14,title: '人员管理',url: ''},
]},
{id:2,title:'页面管理',url:'',children:[
{id: 21,title: '新增管理',url: ''},
{id: 22,title: '删除管理',url: ''},
{id: 23,title: '查询管理',url: ''},
{id: 24,title: '修改管理',url: ''},
]},
{id:3,title:'会员管理',url:'',children:[
{id: 31,title: 'VIP会员管理',url: ''},
{id: 32,title: '会员管理',url: ''},
{id: 33,title: 'SVIP管理',url: ''},
{id: 34,title: '普通会员管理',url: ''},
]}
];
//获得菜单模板
let menuTempPanelHtml = $("#menuTempPanel").html();
//使用模板引擎把 menujson渲染到 menuTempPanelHtml列表模板中 渲染完后会得到完整的html(result)
laytpl(menuTempPanelHtml).render(menuJson,function (result) {
//将result渲染到菜单上
$("#menuPanel").html(result);
})
/*
*
* 动态tab操作
* */
$(".menuItem").on('click',function () {
let title=$(this).html();
let id = $(this).attr("data-id");
let url=$(this).attr("data-url");
element.tabAdd('menuTab',{
title:title,
content:'<iframe style="height:600px;width: 100%" src="'+url+'"></iframe>',
id:id,
});
//将id是当前点击的id的tab的内容切换到当前的tab
element.tabChange('menuTab',id);
})
/*
* 需要重写渲染一下页面，不然手风琴无法折叠
* */
//第一种方法
//layui.element.init();//初始化
//第二种方法
element.render('nav')
});
</script>
</body>
</html>
代码二修改版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜单和tab操作</title>
<script type="text/javascript" src="../lib/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../lib/layui/layui.js"></script>
<link rel="stylesheet" href="../lib/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">layui 后台布局</div>
<!-- 头部区域（可配合layui已有的水平导航） -->
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<!--加了 lay-shrink="all"这个属性则菜单 一个开启一个会折叠-->
<ul class="layui-nav layui-nav-tree" lay-filter="test" id="menuPanel" lay-shrink="all">
<!--挖出来的li-->
</ul>
</div>
</div>
<div class="layui-body">
<div class="layui-tab" lay-allowClose="true" lay-filter="menuTab">
<ul class="layui-tab-title">
<li class="layui-this">首页</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">首页</div>
</div>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
© layui.com - 底部固定区域
</div>
</div>
<!--定义我们要渲染的菜单模板 d代表得到的json串-->
<script type="text/html" id="menuTempPanel">
{{# for(let i=0;i<d.length;i++){ }}
<!--加了layui-nav-itemed 后默认展开 这儿不加-->
<li class="layui-nav-item ">
<a class="" href="javascript:;">{{ d[i].title}}</a>
<dl class="layui-nav-child">
{{# for(let j=0;j<d[i].children.length;j++){ }}
<dd>
<a class="menuItem" href="javascript:;" data-id="{{d[i].children[j].id}}" data-url="{{d[i].children[j].url}}">{{ d[i].children[j].title}}</a>
</dd>
{{# }}}
</dl>
</li>
{{# }}}
</script>
<script>
//JavaScript代码区域
layui.use(['element','laytpl'], function(){
let element = layui.element;
let laytpl=layui.laytpl;
//定义菜单json字符串
let menuJson=[
{id:1,title:'后台管理',url:'',children:[
{id: 11,title: '用户管理',url: 'https://www.baidu.com'},
{id: 12,title: '角色管理',url: 'https://www.hao123.com/'},
{id: 13,title: '部门管理',url: 'https://www.qq.com/'},
{id: 14,title: '人员管理',url: 'https://www.163.com/?referFrom=www.hao123.com'},
]},
{id:2,title:'页面管理',url:'',children:[
{id: 21,title: '新增管理',url: ''},
{id: 22,title: '删除管理',url: ''},
{id: 23,title: '查询管理',url: ''},
{id: 24,title: '修改管理',url: ''},
]},
{id:3,title:'会员管理',url:'',children:[
{id: 31,title: 'VIP会员管理',url: ''},
{id: 32,title: '会员管理',url: ''},
{id: 33,title: 'SVIP管理',url: ''},
{id: 34,title: '普通会员管理',url: ''},
]}
];
//获得菜单模板
let menuTempPanelHtml = $("#menuTempPanel").html();
//使用模板引擎把 menujson渲染到 menuTempPanelHtml列表模板中 渲染完后会得到完整的html(result)
laytpl(menuTempPanelHtml).render(menuJson,function (result) {
//将result渲染到菜单上
$("#menuPanel").html(result);
})
/*
*
* 动态tab操作
* */
$(".menuItem").on('click',function () {
let title=$(this).html();
let id = $(this).attr("data-id");
let url=$(this).attr("data-url");
//声明一个是否点击过的标志 默认是false点击过
let check=false;
let menuFrames=$(".menu-iframe");
let checkId;
//循环所有的 tab 里面的 iframe 【class = menu-iframe】
//找到 是否在当前iframe有你点击的id
for(let i=0;i<menuFrames.length;i++){
let iframeId=$(menuFrames[i]).attr('tab-id');
//判断当前点击的菜单项id是否和已经存在的iframe的id相等
if (id==iframeId){
check=true;
checkId=iframeId;
break;
}
}
if (check){
//找到了 点击过 我把当前找到位置的id tabChange方法 让他选中
// let index=clickArray.indexOf(id);
element.tabChange('menuTab',checkId)
}else {
//没找到 没点过
element.tabAdd('menuTab',{
title:title,
id:id,
content:'<iframe class="menu-iframe" tab-id="'+id+'" style="width: 100%;height: 820px" src="'+url+'"></iframe>'
});
//将id是当前点击的id的tab的内容切换到当前的tab
element.tabChange('menuTab',id);
}
})
/*
* 需要重写渲染一下页面，不然手风琴无法折叠
* */
//第一种方法
//layui.element.init();//初始化
//第二种方法
element.render('nav')
});
</script>
</body>
</html>
