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 相关文章推荐
js 巧妙去除数组中的重复项
Jan 25 Javascript
jQuery 美元符冲突的解决方法
Mar 28 Javascript
原来Jquery.load的方法可以一直load下去
Mar 28 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
高效Web开发的10个jQuery代码片段
Jul 22 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
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实现的简单压缩英文字符串的代码
2008/04/24 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
详解php实现页面静态化原理
2017/06/21 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
Python3中的json模块使用详解
2018/05/05 Python
python和shell获取文本内容的方法
2018/06/05 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
关于Python错误重试方法总结
2021/01/03 Python
远东集团网络工程师面试题
2014/10/20 面试题
药学专业学生的自我评价分享
2014/02/06 职场文书
疾病捐款倡议书
2014/05/13 职场文书
运动会新闻稿
2015/07/17 职场文书
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python