layui添加动态菜单与选项卡 AJAX请求的例子


Posted in Javascript onSeptember 25, 2019

如下所示:

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" rel="external nofollow" 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添加动态菜单与选项卡 AJAX请求的例子

以上这篇layui添加动态菜单与选项卡 AJAX请求的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习YUI.Ext第五日--做拖放Darg&amp;Drop
Mar 10 Javascript
jQuery.extend 函数的详细用法
Jun 27 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
JS控制一个DIV层在指定时间内消失的方法
Feb 17 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 Javascript
微信小程序request出现400的问题解决办法
May 23 Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
JS获取动态添加元素的方法详解
Jul 31 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 #Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 #Javascript
vue+axios实现post文件下载
Sep 25 #Javascript
vue + axios get下载文件功能
Sep 25 #Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 #Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 #jQuery
axios实现文件上传并获取进度
Mar 25 #Javascript
You might like
PHP原理之异常机制深入分析
2010/08/08 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
Python fileinput模块使用实例
2015/05/28 Python
python各种语言间时间的转化实现代码
2016/03/23 Python
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
C# Debug和Testing相关面试题
2015/10/25 面试题
专业实习自我鉴定
2013/10/29 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
租房协议书范文
2014/08/20 职场文书
119消防日活动总结
2014/08/29 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
社区服务活动报告
2015/02/05 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
Redis Stream类型的使用详解
2021/11/11 Redis