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 相关文章推荐
用jQuery实现检测浏览器及版本的脚本代码
Jan 22 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
JavaScript 正则命名分组【推荐】
Jun 07 Javascript
详解Vue.js中引入图片路径的几种方式
Jun 17 Javascript
微信小程序实现手指拖动选项排序
Apr 22 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
如何使用Strace调试工具
2013/06/03 PHP
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
PHP实现浏览器格式化显示XML的方法示例
2019/01/22 PHP
Javascript this指针
2009/07/30 Javascript
js文件中调用js的实现方法小结
2009/10/23 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
Python使用chardet判断字符编码
2015/05/09 Python
Python 模拟登陆的两种实现方法
2017/08/10 Python
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
毕业生优秀推荐信
2013/11/26 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫
Python turtle编写简单的球类小游戏
2022/03/31 Python