layui实现左侧菜单点击右侧内容区显示

2024-09-27 13:33:19

layui这个前端框架对后端人员来说提供了极大的方便，很大一部分同学在刚接触到这个框架就迫不及待的要动手实践了，刚好最近需要开发一个后台管理项目，就拿layui来进行学习和实践。

还没有接触到的同学可以先通读一遍文档，这样在遇到问题的时候才能够对症下药，仔细研究相关的板块
今天我们先来学习一下使用layui来实现左侧点击菜单，内容区显示tab

实验效果

实现过程

html代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title><?php echo $curTitle;?></title>
 <link rel="stylesheet" href="js/layui/css/layui.css" >
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
 <div class="layui-header">
  <div class="layui-logo">XXXX业务管理平台</div>
  <ul class="layui-nav layui-layout-right">
   <li class="layui-nav-item">
    欢迎光临，商户001
   </li>
   <li class="layui-nav-item"><a href="">安全退出</a></li>
  </ul>
 </div>

 <div class="layui-side layui-bg-black">
  <div class="layui-side-scroll">
   <!-- 左侧垂直导航区域-->
   <ul class="layui-nav layui-nav-tree" lay-filter="test">
    <li class="layui-nav-item">
     <a class="" href="javascript:;" >管理员管理</a>
     <dl class="layui-nav-child">
      <dd>
       <a href="javascript:;" data-id="1" data-title="管理员列表" data-url="index.php?&a=adminList"
        class="site-demo-active" data-type="tabAdd">管理员列表</a></dd>
      <dd><a href="javascript:;" data-id="2" data-title="管理员日志" data-url="index.php?&a=adminLogList"
        class="site-demo-active" data-type="tabAdd">管理员日志</a></dd>
     </dl>
    </li>
    <li class="layui-nav-item">
     <a href="javascript:;" >交易管理</a>
     <dl class="layui-nav-child">
      <dd><a href="javascript:;" data-id="" data-id="3" data-title="存款列表"
        　data-url="index.php?&a=adminList" class="site-demo-active" data-type="tabAdd">存款列表</a>
      </dd>
      <dd><a href="javascript:;" >代付列表</a></dd>
     </dl>
    </li>
    <li class="layui-nav-item">
     <a href="javascript:;" >系统管理</a>
     <dl class="layui-nav-child">
      <dd><a href="javascript:;" >支付API设置</a></dd>
      <dd><a href="javascript:;" >公告设置</a></dd>
      <dd><a href="javascript:;" >控制台</a></dd>
    </li>
   </ul>
  </div>
 </div>

 <!--tab标签-->
 <div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">
  <ul class="layui-tab-title"></ul>
  <div class="layui-tab-content"></div>
 </div>

<div class="layui-footer" style="text-align:center;">
 <!-- 底部固定区域 -->
 © sunway.tk XXXX业务管理平台
</div>
</div>
<script src="/js/layui/layui.js"></script>
<script>
<!--这里是放置js代码区域-->
</script>
</body>
</html>

javascript代码：

layui.use(['element', 'layer', 'jquery'], function () {
  var element = layui.element;
  // var layer = layui.layer;
  var $ = layui.$;
  // 配置tab实践在下面无法获取到菜单元素
  $('.site-demo-active').on('click', function () {
   var dataid = $(this);
   //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
   if ($(".layui-tab-title li[lay-id]").length <= 0) {
    //如果比零小，则直接打开新的tab项
    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
   } else {
    //否则判断该tab项是否以及存在
    var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
    $.each($(".layui-tab-title li[lay-id]"), function () {
     //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
     if ($(this).attr("lay-id") == dataid.attr("data-id")) {
      isData = true;
     }
    })
    if (isData == false) {
     //标志为false 新增一个tab项
     active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
    }
   }
   //最后不管是否新增tab，最后都转到要打开的选项页面上
   active.tabChange(dataid.attr("data-id"));
  });

  var active = {
   //在这里给active绑定几项事件，后面可通过active调用这些事件
   tabAdd: function (url, id, name) {
    //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
    //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
    element.tabAdd('demo', {
     title: name,
     content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:99%;"></iframe>',
     id: id //规定好的id
    })
    FrameWH(); //计算ifram层的大小
   },
   tabChange: function (id) {
    //切换到指定Tab项
    element.tabChange('demo', id); //根据传入的id传入到指定的tab项
   },
   tabDelete: function (id) {
    element.tabDelete("demo", id);//删除
   }
  };
  function FrameWH() {
   var h = $(window).height();
   $("iframe").css("height",h+"px");
  }
 });

实现逻辑：动态判断所点击的菜单元素，利用元素上设置的data属性值，在右侧内容区生成页面iframe进行动态显示
参考文献：layui官网

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

layui递归实现动态左侧菜单

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

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

今天做了一个左侧菜单的效果,做后台的时候应该会经常用到这个效果的,代码同样是简洁明了,复制即可用:效果图如下: 代码如下:(这个上下箭头的图标如上,图标可自己换) 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>后台左侧
Vue3+Element-Plus实现左侧菜单折叠与展开功能示例

目录 1.最终实现的效果图 2. 实现左侧菜单折叠与展开功能步骤 2.1 首先应该在菜单顶部放一个折叠展开的按钮条 2.2 接下来,画按钮条UI结构,实现折叠与展开功能 2.3 实现点击该DIV时,触发菜单折叠与展开 2.4 折叠与展开功能是实现了,但是背景颜色并没有随着菜单折叠时跟着变小或展开时跟着变大 2.5. 最终效果 3. Home.vue 代码 1.最终实现的效果图 2. 实现左侧菜单折叠与展开功能步骤 2.1 首先应该在菜单顶部放一个折叠展开的按钮条 2.2 接下来,画按钮条
Vue3+Element-Plus 实现点击左侧菜单时显示不同内容组件展示在Main区域功能

目录 1.本章目标 2. 如何实现 2.1 通过将左侧菜单列表改造成路由链接的形式来实现 2.2 接下来,监听跳转的路由链接,实现点击二级菜单列表时,在Main 区域展示不同的内容组件 2.3 各组件代码 1.本章目标 1.1 点击不同的菜单列表,可以在右侧 (Main) 主体区域显示不同的组件页面 2. 如何实现 2.1 通过将左侧菜单列表改造成路由链接的形式来实现 1. 首先应该为 Menu (菜单)启用 vue-router 模式 (路由模式),默认是false Menu 菜单 | El
mpvue实现左侧导航与右侧内容的联动

本文实例为大家分享了mpvue左侧导航与右侧内容联动的具体代码,供大家参考,具体内容如下效果图如下: (1)左侧导航联动右侧内容实现:点击左侧导航,右侧内容滑到对应的位置,并且导航上有current当前样式. mpvue用的还是微信小程序提供的组件scroll-view,它里面有一个属性scroll-into-view,值为某子元素的id,滚动到该元素. template: <scroll-view class="menu-wrapper" scroll-y> <
js实现二级菜单点击显示当前内容效果

最近做了一个二级菜单点击事件的效果,一级菜单有3个,二级菜单是固定的,而且html布局并不是父子级关系,具体请看效果图如下 html结构入下 <div> <ul> <li>您好!日期</li> <li class="li_list checked grounder">滚球</li> <li class="li_list">今日赛事</li> <li class=&q
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例

最近博主在边学flask边写测试平台,碰到一个比较常用的场景如下图所示这里有一个输入框组,下拉菜单里面有3个选项,还有一个输入框,代码是用 bootstrap写的,代码也给大家贴出来 <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
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
JavaScript实现左侧菜单效果

本文实例为大家分享了js实现左侧菜单效果展示的具体代码,供大家参考,具体内容如下当前所学做出来的代码量有点大,以后的学习会使它更简单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide { display: none; } .item .h
JS实现左侧菜单工具栏

本文实例为大家分享了JS实现左侧菜单工具栏的具体代码,供大家参考,具体内容如下摘要该js脚本可帮助你快速实现左侧菜单工具栏.通过js封装成一个方法类,直接new该对象即可快速生成左侧菜单工具栏. 一.效果展示二.menu.js文件 (1)WenMenuNode节点 let WenMenuNode = function ({ text, wenMenu,

layui实现左侧菜单点击右侧内容区显示

相关推荐

随机推荐