本文实例为大家分享了layui添加动态菜单与选项卡的具体代码,供大家参考,具体内容如下
HTML
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1,最大范围=1”比;
& lt; title> Layui
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/js/css/layui.css "媒体=八小北?
& lt;/head>
& lt; body>
& lt; div class=" layui-side layui-bg-black”比;
& lt; div类=發ayui-side-scroll”比;
& lt; !——左侧导航区域(可配合layui已有的垂直导航)——比;
& lt; ul类=" layui-nav layui-nav-tree lay-filter”=安馐浴眎d=安说ァ弊４? lt;/ul>
& lt;/div>
& lt;/div>
& lt; div类=發ayui-body”比;
& lt; !——动态选项卡——比;
& lt; div id=" tabzu " class=" layui-tab layui-tab-card layui-tab-brief”lay-filter=皌abDemo”lay-allowclose=" true "比;
& lt; ul类=" layui-tab-title "祝辞& lt;/ul>
& lt; div类=" layui-tab-content "祝辞& lt;/div>
& lt;/div>
& lt;/div>
& lt;脚本src=" https://www.yisu.com/zixun/js/layui.all.js " charset=皍tf - 8”祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/index.js "祝辞& lt;/script>
& lt;/body>
& lt;/html>
index.js
layui。使用(“元素”,函数(){
函数checkLastItem(加勒比海盗,我){
加勒比海盗。长度==(i + 1);
}
函数getAhtml (obj) {
返回“& lt; a href=https://www.yisu.com/眏avascript:; \“οnclick=\”addTab (“+ obj.name +”,”+ obj。url + ") \“比”;+ obj.name +“& lt;/a>”;
}//动态菜单
layui.jquery.ajax ({
url: http://127.0.0.1:18000/sys/菜单”,
方法:“文章”,
成功:函数(res) {
var html=" ";
(var=0;我& lt;res.length;我+ +){
var strli=" & lt;李类=\ " layui-nav-item lay-unselect \“在”;
如果(res[我]。url==' # ') {
strli=strli +“& lt; a href=https://www.yisu.com/眏avascript:; \“在”+ res[我]. name +“& lt;/a>”;
[我]console.log (res . name)
其他}{
strli=strli + getAhtml (res[我]);
}
如果(res[我]。pId==" 0 ",,我! checkLastItem (res),,res (i + 1)。pId !=" 0 ") {
strli=strli +“& lt; dl类=\”layui-nav-child \“在”;
(;我! checkLastItem (res),,res (i + 1)。pId !=" 0 ";我+ +){
strli=strli + & lt; dd>“+ getAhtml (res (i + 1)) +“& lt;/dd>”;
}
strli=strli +“& lt;/dl>”;
}
strli=strli +“& lt;/li>”;
html=html + strli;
}
layui.jquery(“#菜单”). html (html);
layui.element.init ();//一定初始化一次
}
}）
}）;//添加选项卡
函数addTab(名称、网址){
如果(layui.jquery”。李layui-tab-title [lay-id=' +名字+ " ']”)。长度比;0){//选项卡已经存在
layui.element。tabChange (tabDemo,名称);
层。味精(“切换——“+名字)
其他}{//动态控制iframe高度
var tabheight=layui.jquery(窗口).height () - 95;
contentTxt=' & lt; iframe的src=" + url +”滚动宽度=安弧??00%”的身高=" + (tabheight) + PX”祝辞& lt;/iframe>”;//新增一个标签项
layui.element。tabAdd (tabDemo, {
标题:名字,
内容:contentTxt,
id:名称
}）//切换刷新
layui.element。tabChange (tabDemo,名称)
层。味精(“新增——“+名字)
}
}
JSON
菜单
(
{
“名称”:“首页”,
“url”:“shouye.html”,
“id”:“1”,
“pId”:“0”
},
{
“名称”:“数据库”,
“url”:“#”,
“id”:“1”,
“pId”:“0”
},
{
“名称”:“MYSQL”,
“url”:“mysql.html”,
“id”:“2”,
“pId”:“1”
},
{
“名称”:“甲骨文”,
“url”:“oracle.html”,
“id”:“3”,
“pId”:“1”
},
{
“名称”:“开发语言”,
“url”:“#”,
“id”:“4”,
“pId”:“0”
},
{
“名称”:“JAVA”,
“url”:“java.html”,
“id”:“5”,
“pId”:“4”
},
{
“名称”:“Python”,
“url”:“python.html”,
“id”:“6”,
“pId”:“4”
}
)
效果截图:
