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 相关文章推荐
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 Javascript
jquery如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
Node.js使用Express.Router的方法
Nov 14 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
详解微信小程序支付流程与梳理
Jul 16 Javascript
bootstrap table列和表头对不齐的解决方法
Jul 19 Javascript
小程序实现文字循环滚动动画
Jun 14 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 出现 http500 错误的解决方法
2021/03/09 PHP
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
javascript实现画板功能
2020/04/12 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
Python实现获取网站PR及百度权重
2015/01/21 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
从0开始的Python学习016异常
2019/04/08 Python
python实现从wind导入数据
2019/12/03 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
python从Oracle读取数据生成图表
2020/10/14 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
高校毕业生自我鉴定
2013/10/27 职场文书
省级四好少年事迹材料
2014/01/25 职场文书
工作鉴定评语
2014/05/04 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
七年级生物教学反思
2016/02/20 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python