layui添加动态菜单与选项卡

2024-10-18 08:47:13

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

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递归实现动态左侧菜单

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下我知道两种方式实现: 一.先加载所有的主菜单,之后通过点击主菜单在加载该菜单的子菜单(缺点,如果判断是否已经加载过,那么动态添加了菜单,这里显示不出来,不判断的话,每次点击都会请求一次,这样请求的次数就太多了,服务器不太好的话可能会成为高并发的一个原因) 二.就是以下的了,使用递归一次性全部加载出来(缺点,耗费服务器内存) 如果动态添加一个菜单,你当前页面不手动刷新菜单不会显示,这个问题可以考虑用websock
layUI实现三级导航菜单效果

本文实例为大家分享了layUI实现三级导航菜单展示的具体代码,供大家参考,具体内容如下废话不多说,直接上代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
layui选项卡效果实现代码

本文实例为大家分享了layui选项卡的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项卡</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body&
layui实现左侧菜单点击右侧内容区显示

layui这个前端框架对后端人员来说提供了极大的方便,很大一部分同学在刚接触到这个框架就迫不及待的要动手实践了,刚好最近需要开发一个后台管理项目,就拿layui来进行学习和实践. 还没有接触到的同学可以先通读一遍文档,这样在遇到问题的时候才能够对症下药,仔细研究相关的板块今天我们先来学习一下使用layui来实现左侧点击菜单,内容区显示tab 实验效果实现过程 html代码 <!DOCTYPE html> <html lang="en"> <head&g
layui实现三级导航菜单

本文实例为大家分享了layui实现三级导航菜单的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>.
layui自定义ajax左侧三级菜单

本文实例为大家分享了layui自定义ajax左侧三级菜单的具体代码,供大家参考,具体内容如下 HTML代码: 需引入layui.css代码  <div class="layui-side layui-bg-black" id="admin-side"> <div class="layui-side-scroll" id="admin-navbar-side" lay-f
layui添加动态菜单与选项卡 AJAX请求的例子

如下所示: 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
layui添加动态菜单与选项卡

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <titl
LayUI+Shiro实现动态菜单并记住菜单收展的示例

LayUI + Shiro + Thyemleaf 实现动态菜单并记住菜单收展一.Maven 依赖 <dependencies>  <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.39</version> </depen
layui select动态添加option的实例

html <form class="layui-form" action=""> <div class="layui-form-item proSelect"> <label class="layui-form-label">产品类别</label> <div class="layui-input-block editWidth"> <sel
jquery实现动态菜单的实例代码

jquery实现动态菜单的方式跟jquery弹出窗口的方式差不多,都是采用JavaScript操作css的方式. 其具体步骤可以分为以下几步: •创建一个含有要表达的菜单的html页面复制代码代码如下: <html> <head> <title>jquery示例2:jquery菜单</title> <meta http-equiv="Content-Type" content="text/html; ch
XML动态菜单（二）flash

在上一期的XML菜单的教程中,我们做了一个简单的纵向排列的XML文字菜单,并且在flash中附加了一个跟随鼠标的缩略图.缩略图的数据也是从XML中提取的.在我们XML菜单教程的第二期,我们来解决另外一个问题.我们都知道XML的方便,随意的更改,删除和添加数据.请注意,更改和删除还好,如果添加的话,这里就会有一个界面排版和用户使用的问题的.拿我们上一次的XML菜单来演示,我把我们的XML文件有添加了几十条内容,结果我们的XML菜单变成这样了:http://www.keyframe1.com/tut
zTree树形菜单交互选项卡效果的实现方法

1. 添加自定义属性 page 2. 为 ztree 每个树形节点,添加点击事件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ztree树形菜单的使用</title>  <script type="text/javascript" src="../js
vue动态菜单、动态路由加载以及刷新踩坑实战

目录需求: 思路: 教训: 分享正文: 总结需求: 从接口动态获取子菜单数据动态加载要求只有展开才加载子菜单数据支持刷新,页面显示正常思路: 一开始比较乱,思路很多.想了很多首先路由和菜单共用一个全局route, 数据的传递也是通过store的route, 然后要考虑的俩个点就是一个就是渲染菜单和加载路由,可以在导航首位里处理路由,处理刷新. 还有一个地方就是菜单组件里展开事件里面重新生成菜单数据,路由.大体思路差不多,做完就忘了..... 刷新的问题需要用本地缓存处理,之前一直
SpringBoot+Vue实现动态菜单的思路梳理

目录 1. 整体思路 2. 前端渲染 3. 后端菜单生成 3.1 菜单表 3.2 菜单接口关于 Spring Boot + Vue3 的动态菜单,松哥之前已经写了两篇文章了,这两篇文章主要是从代码上和大家分析动态菜单最终的实现方式,但是还是有小伙伴觉得没太看明白,感觉缺乏一个提纲挈领的思路,所以,今天松哥再整一篇文章和大家再来捋一捋这个问题,希望这篇文章能让小伙伴们彻底搞清楚这个问题. 1. 整体思路首先我们来看整体思路. 光说思路大家还是云里雾里,我们结合具体的效果图来看: 最终菜单显示效
详解Vue3如何加载动态菜单

目录 1. 整体思路 2. 实现细节 2.1 加载细节 2.2 getInfo 2.3 generateRoutes 1. 整体思路首先我们来梳理下整体上的实现思路,首先一点:整体思路和 vhr 一模一样. 考虑到有的小伙伴可能已经忘记 vhr 中前端动态菜单的实现思路了,因此本文再和大家分析一下. 为了确保在所有的 .vue 文件中都能访问到到菜单数据,所以选择将菜单数据存入 vuex 中,vuex 是 vue 中一个存储数据的公共地方,所有的 .vue 文件都可以从 vuex 中读取到数据

layui添加动态菜单与选项卡

相关推荐

随机推荐