当前位置：Gxlcms > JavaScript > layui添加动态菜单与选项卡

layui添加动态菜单与选项卡

时间：2021-07-01 10:21:17 帮助过：48人阅读

本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下

HTML

  1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.  <meta charset="utf-8">
  5.  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6.  <title>Layui</title>
  7.  <link rel="stylesheet" href="js/css/layui.css" rel="external nofollow" media="all">
  8.  </head>
  9.  <body>
  10.  <div class="layui-side layui-bg-black">
  11.   <div class="layui-side-scroll">
  12.   <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
  13.   <ul class="layui-nav layui-nav-tree" lay-filter="test" id="memus"></ul>
  14.   </div>
  15.  </div>
  16.  <div class="layui-body">
  17.   <!-- 动态选项卡 -->
  18.   <div id="tabzu" class="layui-tab layui-tab-card layui-tab-brief" lay-filter="tabDemo" lay-allowclose="true">
  19.   <ul class="layui-tab-title"></ul>
  20.   <div class="layui-tab-content"></div>
  21.   </div>
  22.  </div>
  23.  <script src="js/layui.all.js" charset="utf-8"></script>
  24.  <script type="text/javascript" src="js/index.js" ></script>
  25.  </body>
  26.  
  27. </html>

index.js

  1. layui.use('element', function() {
  2.  function checkLastItem(arr, i) {
  3.  return arr.length == (i + 1);
  4.  }
  5.  
  6.  function getAhtml(obj){
  7.  return "<a href=\"javascript:;\" οnclick=\"addTab('" + obj.name + "','" + obj.url + "')\" >" + obj.name + "</a>";
  8.  }
  9.  //动态菜单
  10.  layui.jquery.ajax({
  11.  url: "http://127.0.0.1:18000/sys/menus",
  12.  method: 'POST',
  13.  success: function(res) {
  14.   var html = "";
  15.   for(var i = 0; i < res.length; i++) {
  16.   var strli = "<li class=\"layui-nav-item lay-unselect \" >";
  17.   if (res[i].url =='#'){
  18.    strli = strli + "<a href=\"javascript:;\">" + res[i].name + "</a>";
  19.    console.log(res[i].name)
  20.   }else{
  21.    strli = strli + getAhtml(res[i]);
  22.   }
  23.   if(res[i].pId == "0" && !checkLastItem(res, i) && res[i + 1].pId != "0") {
  24.    strli = strli + "<dl class=\"layui-nav-child\" >";
  25.    for(; !checkLastItem(res, i) && res[i + 1].pId != "0"; i++) {
  26.    strli = strli + "<dd>"+getAhtml(res[i+1])+"</dd>";
  27.    }
  28.    strli = strli + "</dl>";
  29.   }
  30.   strli = strli + "</li>";
  31.   html = html + strli;
  32.   }
  33.   layui.jquery("#memus").html(html);
  34.   layui.element.init(); //一定初始化一次
  35.  }
  36.  })
  37. });
  38.  
  39. //添加选项卡
  40. function addTab(name, url) {
  41.  if(layui.jquery(".layui-tab-title li[lay-id='" + name + "']").length > 0) {
  42.  //选项卡已经存在
  43.  layui.element.tabChange('tabDemo', name);
  44.  layer.msg('切换-' + name)
  45.  } else {
  46.  //动态控制iframe高度
  47.  var tabheight = layui.jquery(window).height() - 95;
  48.  contentTxt = '<iframe src="' + url + '" scrolling="no" width="100%" height="' + (tabheight) + 'PX"></iframe>';
  49.  //新增一个Tab项
  50.  layui.element.tabAdd('tabDemo', {
  51.   title: name,
  52.   content: contentTxt,
  53.   id: name
  54.  })
  55.  //切换刷新
  56.  layui.element.tabChange('tabDemo', name)
  57.  layer.msg('新增-' + name)
  58.  }
  59. }

菜单JSON

  1. [
  2.  {
  3.   "name": "首页",
  4.   "url": "shouye.html",
  5.   "id": "1",
  6.   "pId": "0"
  7.  },
  8.  {
  9.   "name": "数据库",
  10.   "url": "#",
  11.   "id": "1",
  12.   "pId": "0"
  13.  },
  14.  {
  15.   "name": "MYSQL",
  16.   "url": "mysql.html",
  17.   "id": "2",
  18.   "pId": "1"
  19.  },
  20.  {
  21.   "name": "ORACLE",
  22.   "url": "oracle.html",
  23.   "id": "3",
  24.   "pId": "1"
  25.  },
  26.  {
  27.   "name": "开发语言",
  28.   "url": "#",
  29.   "id": "4",
  30.   "pId": "0"
  31.  },
  32.  {
  33.   "name": "JAVA",
  34.   "url": "java.html",
  35.   "id": "5",
  36.   "pId": "4"
  37.  },
  38.  {
  39.   "name": "Python",
  40.   "url": "python.html",
  41.   "id": "6",
  42.   "pId": "4"
  43.  }
  44. ]

效果截图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！