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 相关文章推荐
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
angular的输入和输出的使用方法
Sep 22 Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 Javascript
js实现星星海特效的示例
Sep 28 Javascript
javascript中导出与导入实现模块化管理教程
Dec 03 Javascript
如何用JS实现网页瀑布流布局
Apr 24 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 异常处理实现代码
2009/03/10 PHP
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
php静态文件生成类实例分析
2015/01/03 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
基于jquery完美拖拽,可返回拖动轨迹
2012/03/29 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
2015/08/23 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
layui选项卡效果实现代码
2017/05/19 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
Django web框架使用url path name详解
2019/04/29 Python
pandas 层次化索引的实现方法
2019/07/06 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
银行实习的自我鉴定
2013/12/10 职场文书
学校后勤人员职责
2013/12/27 职场文书
经销商会议欢迎词
2014/01/11 职场文书
简历的自我评价范文
2014/02/04 职场文书
商业房地产广告语
2014/03/13 职场文书
大学生就业策划书范文
2014/04/04 职场文书
库房保管员岗位职责
2014/04/07 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
批评与自我批评总结
2014/10/17 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python