layui添加动态菜单与选项卡


Posted in Javascript onJuly 26, 2019

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

HTML

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <title>Layui</title>
 <link rel="stylesheet" href="js/css/layui.css" media="all">
 </head>
 <body>
 <div class="layui-side layui-bg-black">
 <div class="layui-side-scroll">
 <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
 <ul class="layui-nav layui-nav-tree" lay-filter="test" id="memus"></ul>
 </div>
 </div>
 <div class="layui-body">
 <!-- 动态选项卡 -->
 <div id="tabzu" class="layui-tab layui-tab-card layui-tab-brief" lay-filter="tabDemo" lay-allowclose="true">
 <ul class="layui-tab-title"></ul>
 <div class="layui-tab-content"></div>
 </div>
 </div>
 <script src="js/layui.all.js" charset="utf-8"></script>
 <script type="text/javascript" src="js/index.js" ></script>
 </body>
 
</html>

index.js

layui.use('element', function() {
 function checkLastItem(arr, i) {
 return arr.length == (i + 1);
 }
 
 function getAhtml(obj){
 return "<a href=\"javascript:;\" οnclick=\"addTab('" + obj.name + "','" + obj.url + "')\" >" + obj.name + "</a>";
 }
 //动态菜单
 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 = "<li class=\"layui-nav-item lay-unselect \" >";
 if (res[i].url =='#'){
 strli = strli + "<a href=\"javascript:;\">" + res[i].name + "</a>";
 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 + "<dl class=\"layui-nav-child\" >";
 for(; !checkLastItem(res, i) && res[i + 1].pId != "0"; i++) {
 strli = strli + "<dd>"+getAhtml(res[i+1])+"</dd>";
 }
 strli = strli + "</dl>";
 }
 strli = strli + "</li>";
 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 = '<iframe src="' + url + '" scrolling="no" width="100%" height="' + (tabheight) + 'PX"></iframe>';
 //新增一个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"
 }
]

效果截图:

layui添加动态菜单与选项卡

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 添加节点的几种方法介绍
Sep 04 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
Oct 17 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
浅析node.js的模块加载机制
May 25 Javascript
微信小程序实现留言功能
Oct 31 Javascript
浅析JavaScript 函数柯里化
Sep 08 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 #Javascript
javascript中的闭包概念与用法实践分析
Jul 26 #Javascript
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 #Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 #Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 #jQuery
微信小程序—setTimeOut定时器的问题及解决
Jul 26 #Javascript
layUI实现三级导航菜单效果
Jul 26 #Javascript
You might like
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
Python之PyUnit单元测试实例
2014/10/11 Python
Python脚本实现代码行数统计代码分享
2015/03/10 Python
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
利用Python实现kNN算法的代码
2019/08/16 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
python 实现简易的记事本
2020/11/30 Python
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
应届生财务管理求职信
2013/11/06 职场文书
环保志愿者活动方案
2014/08/14 职场文书
企业员工集体活动方案
2014/08/17 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
2014年药店工作总结
2014/11/20 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
初中班干部工作总结
2015/08/10 职场文书
思想工作总结范文
2015/08/12 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python