layui添加动态菜单与选项卡

前端  /  管理员 发布于 5年前   820

本文实例为大家分享了layui添加动态菜单与选项卡的具体代码，供大家参考，具体内容如下

HTML

index.js

layui.use('element', function() { function checkLastItem(arr, i) { return arr.length == (i + 1); }  function getAhtml(obj){ return "" + obj.name + ""; } //动态菜单 layui.jquery.ajax({ url: "http://127.0.0.1:18000/sys/menus", method: 'POST', success: function(res) { var html = ""; for(var i = 0; i < res.length; i++) { var strli = "
"; if (res[i].url =='#'){ strli = strli + "" + res[i].name + ""; console.log(res[i].name) }else{ strli = strli + getAhtml(res[i]); } if(res[i].pId == "0" && !checkLastItem(res, i) && res[i + 1].pId != "0") { strli = strli + "
"; for(; !checkLastItem(res, i) && res[i + 1].pId != "0"; i++) { strli = strli + "
"+getAhtml(res[i+1])+"
"; } strli = strli + "
"; } strli = strli + "
"; html = html + strli; } layui.jquery("#memus").html(html); layui.element.init(); //一定初始化一次 } })}); //添加选项卡function addTab(name, url) { if(layui.jquery(".layui-tab-title li[lay-id='" + name + "']").length > 0) { //选项卡已经存在 layui.element.tabChange('tabDemo', name); layer.msg('切换-' + name) } else { //动态控制iframe高度 var tabheight = layui.jquery(window).height() - 95; contentTxt = ''; //新增一个Tab项 layui.element.tabAdd('tabDemo', { title: name, content: contentTxt, id: name }) //切换刷新 layui.element.tabChange('tabDemo', name) layer.msg('新增-' + name) }}

菜单JSON

[ { "name": "首页", "url": "shouye.html", "id": "1", "pId": "0" }, { "name": "数据库", "url": "#", "id": "1", "pId": "0" }, { "name": "MYSQL", "url": "mysql.html", "id": "2", "pId": "1" }, { "name": "ORACLE", "url": "oracle.html", "id": "3", "pId": "1" }, { "name": "开发语言", "url": "#", "id": "4", "pId": "0" }, { "name": "JAVA", "url": "java.html", "id": "5", "pId": "4" }, { "name": "Python", "url": "python.html", "id": "6", "pId": "4" }]

效果截图：

如果大家还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• layui选项卡效果实现代码
• layerui代码控制tab选项卡,添加,关闭的实例
• layui点击导航栏刷新tab页的示例代码
• layui实现tab的添加拒绝重复的方法
• layui弹出框Tab选项卡的示例代码