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 相关文章推荐
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
JavaScript入门教程(6) Window窗口对象
Jan 31 Javascript
JavaScript 获取事件对象的注意点
Jul 29 Javascript
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 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
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
php创建类并调用的实例方法
2019/09/25 PHP
PHP实现简单登录界面
2019/10/23 PHP
js精度溢出解决方案
2012/12/02 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
Javascript中replace()小结
2015/09/30 Javascript
让你一句话理解闭包(简单易懂)
2016/06/03 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
2016/06/12 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
电子商务专业自我鉴定
2013/12/18 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
高中团支书竞选稿
2015/11/21 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang