使用layui实现的左侧菜单栏以及动态操作tab项方法

好的。使用layui实现左侧菜单栏和动态操作tab项是一个比较常见的需求，以下是实现的详细攻略。

实现左侧菜单栏

使用tree组件渲染菜单

LayUI提供了tree组件用于展示菜单栏，我们可以使用tree组件来渲染左侧菜单。

<div class="layui-col-md3">
  <div class="layui-card">
    <div class="layui-card-header">菜单</div>
    <div class="layui-card-body">
      <div id="menu" class="layui-tree"></div>
    </div>
  </div>
</div>

上面的代码片段中，我们使用了tree组件，并将其放在了一个layui-card中展示。tree组件渲染菜单需要一个数据源，我们可以使用一个js数组来存储菜单信息。

var menuData = [
  {
    title: '首页',
    icon: 'layui-icon-home',
    href: '/'
  },
  {
    title: '用户管理',
    icon: 'layui-icon-user',
    spread: true,
    children: [
      {
        title: '用户列表',
        icon: 'layui-icon-user',
        href: '/user/list'
      },
      {
        title: '新增用户',
        icon: 'layui-icon-add-circle',
        href: '/user/add'
      }
    ]
  }
];

layui.use(['tree'], function () {
  var tree = layui.tree;

  tree.render({
    elem: '#menu',
    data: menuData,
    click: function (obj) {
      // TODO: 处理菜单点击事件
    }
  });
});

在上面的代码片段中，我们使用了一个数组menuData来存储菜单信息。其中，每个菜单项都有一个title字段表示菜单名称，一个icon字段表示菜单图标（这里使用了LayUI内置的图标），一个href字段表示菜单链接地址。如果一个菜单项有子菜单，则使用children字段存储子菜单。

然后，我们使用tree.render方法将菜单渲染到元素#menu中。我们还可以通过指定click方法来处理菜单的点击事件。

处理菜单点击事件

我们的菜单栏已经渲染出来了，现在需要给菜单的点击事件绑定处理方法。

tree.render({
  elem: '#menu',
  data: menuData,
  click: function (obj) {
    var href = obj.data.href;
    var title = obj.data.title;
    var icon = obj.data.icon;

    addTab(title, href, icon);
  }
});

在上面的代码片段中，我们在click方法中通过obj.data获取到当前点击的菜单项相关信息，然后调用addTab方法打开一个新的tab页来展示菜单对应的内容。下面我们就来详细讲解如何实现动态操作tab项。

动态操作tab项

打开一个新的tab页

我们可以使用LayUI的tab组件来创建和管理多个tab页，使用方式如下。

layui.use('element', function () {
  var element = layui.element;

  function addTab(title, href, icon) {
    element.tabAdd('demo', {
      title: title,
      content: '<iframe frameborder="0" src="' + href + '"></iframe>',
      icon: icon
    });
  }
});

在上面的代码片段中，我们使用了element.tabAdd方法创建了一个新的tab页。其中，第一个参数'demo'表示tab所在的父级元素（可以是tab的容器也可以是tab的所在区域的id），第二个参数是一个对象，包含了title、content、icon等选项。其中，title表示tab的标题，content是tab的内容，这里使用了一个iframe来展示页面。icon表示tab的图标，这里我们可以直接使用菜单对应的图标。

关闭一个tab页

我们可以使用element.tabDelete方法来关闭一个tab页。

layui.use('element', function () {
  var element = layui.element;

  function deleteTab(title) {
    element.tabDelete('demo', title);
  }
});

在上面的代码片段中，我们使用了element.tabDelete方法关闭了一个tab页。其中，第一个参数'demo'表示tab所在的父级元素，第二个参数是一个字符串，表示要关闭的tab的title。

示例

下面是一个完整的实例代码，包含了左侧菜单和tab操作功能。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>动态操作tab页</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.7/css/layui.min.css">
</head>
<body>
<div class="layui-container">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md3">
      <div class="layui-card">
        <div class="layui-card-header">菜单</div>
        <div class="layui-card-body">
          <div id="menu" class="layui-tree"></div>
        </div>
      </div>
    </div>
    <div class="layui-col-md9">
      <div class="layui-tab layui-tab-card" lay-filter="demo">
        <ul class="layui-tab-title">
          <li class="layui-this">欢迎界面</li>
        </ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item layui-show"><iframe frameborder="0" src="/welcome"></iframe></div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.7/layui.min.js"></script>
<script>
  var menuData = [
    {
      title: '首页',
      icon: 'layui-icon-home',
      href: '/welcome'
    },
    {
      title: '用户管理',
      icon: 'layui-icon-user',
      spread: true,
      children: [
        {
          title: '用户列表',
          icon: 'layui-icon-user',
          href: '/user/list'
        },
        {
          title: '新增用户',
          icon: 'layui-icon-add-circle',
          href: '/user/add'
        }
      ]
    }
  ];

  layui.use(['tree', 'element'], function () {
    var tree = layui.tree;
    var element = layui.element;

    tree.render({
      elem: '#menu',
      data: menuData,
      click: function (obj) {
        var href = obj.data.href;
        var title = obj.data.title;
        var icon = obj.data.icon;

        addTab(title, href, icon);
      }
    });

    function addTab(title, href, icon) {
      if ($('.layui-tab-title li[lay-id="' + href + '"]').length > 0) {
        element.tabChange('demo', href);
      } else {
        element.tabAdd('demo', {
          title: title,
          content: '<iframe frameborder="0" src="' + href + '"></iframe>',
          icon: icon,
          id: href
        });
      }
    }

    $(document).on('click', '.layui-tab-title .layui-tab-close', function () {
      var title = $(this).parent('li').attr('lay-id');
      deleteTab(title);
      return false;
    });

    function deleteTab(title) {
      element.tabDelete('demo', title);
    }
  });
</script>
</body>
</html>

在上面的示例代码中，我们使用了jQuery来绑定tab关闭按钮的点击事件。同时，我们在addTab方法中提供了判断tab是否已经存在的逻辑，避免重复打开同一页面时出现多个相同的tab页。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用layui实现的左侧菜单栏以及动态操作tab项方法 - Python技术站