怎么用layui操作左侧菜单栏及动态操作tab项

Layui是一款前端UI框架，它提供了菜单栏和tab组件，可以帮助我们快速搭建前端页面。本文将介绍如何使用Layui操作左侧菜单栏及动态操作tab项。

一、实现左侧菜单栏

1.引入Layui库

在HTML文件中引入Layui库的css和js文件。

<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

2.定义菜单栏HTML结构

在HTML文件中定义左侧菜单栏的HTML结构。

<div class="layui-side">
  <div class="layui-side-scroll">
    <ul class="layui-nav layui-nav-tree" lay-filter="menu"></ul>
  </div>
</div>

其中，layui-side表示整个左侧菜单栏的样式，layui-side-scroll表示左侧菜单栏滚动条的样式，layui-nav表示菜单栏的样式，lay-filter="menu"表示整个菜单栏的过滤器名称，用于后面的JavaScript代码中调用。

3.渲染菜单栏

在JavaScript代码中使用Layui的渲染方法laytpl()渲染菜单栏。

// 渲染左侧菜单栏
var leftMenuHtml = [
  '<li class="layui-nav-item layui-this">',
  '<a href="javascript:;" data-url="home.html">',
  '<i class="layui-icon layui-icon-home"></i><cite>首页</cite></a>',
  '</li>',
  '<li class="layui-nav-item">',
  '<a href="javascript:;" data-url="product.html">',
  '<i class="layui-icon layui-icon-app"></i><cite>产品管理</cite>',
  '<span class="layui-nav-more"></span></a>',
  '<dl class="layui-nav-child">',
  '<dd><a href="javascript:;" data-url="product-list.html"><cite>产品列表</cite></a></dd>',
  '<dd><a href="javascript:;" data-url="product-add.html"><cite>新增产品</cite></a></dd>',
  '<dd><a href="javascript:;" data-url="product-edit.html"><cite>编辑产品</cite></a></dd>',
  '</dl>',
  '</li>',
  '<li class="layui-nav-item">',
  '<a href="javascript:;" data-url="user.html">',
  '<i class="layui-icon layui-icon-user"></i><cite>用户管理</cite></a>',
  '</li>'
].join('');

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

  var $ = layui.$;

  // 渲染左侧菜单栏
  laytpl(leftMenuHtml).render({}, function (html) {
    $("#mainMenu").html(html);
    element.render('nav', 'menu');
  });
});

其中，leftMenuHtml是一个字符串数组，表示菜单栏的HTML结构。laytpl()方法将leftMenuHtml中的菜单HTML结构渲染到mainMenu这个元素中。element.render()方法用于对菜单栏进行渲染。

4.绑定菜单栏点击事件

在JavaScript代码中绑定菜单栏点击事件，当菜单被点击时，调用打开tab页面的方法。

// 绑定点击菜单事件
$("#mainMenu").on("click", "a[data-url]", function () {
  var href = $(this).attr("data-url");
  var title = $(this).text();
  if (!href) {
    return;
  }
  addTab(href, title);
});

// 新增tab页
function addTab(href, title) {
  var element = layui.element;
  var $tabTitle = $(".layui-tab-title");
  var $tabContent = $(".layui-tab-content");

  // 判断tab是否已经存在
  var exist = false;
  $tabTitle.find("li").each(function () {
    if ($(this).attr("lay-id") == href) {
      exist = true;
      element.tabChange('example', href);
      return false;
    }
  });

  // 如果tab不存在，则新增tab
  if (!exist) {
    var html = '<iframe src="' + href + '" frameborder="0"></iframe>';
    element.tabAdd('example', {
      title: title,
      content: html,
      id: href
    });
    element.tabChange('example', href);
  }
}

其中，$("a[data-url]")表示选择所有含有data-url属性的a标签。如果这个a标签被点击，则获取它的data-url属性和文本内容，将data-url属性作为tab的ID，文本内容作为tab的标题，调用addTab()方法打开tab页面。

addTab()方法中首先判断tab是否已经存在。如果存在，则切换到已经存在的tab。否则，构建一个iframe标签，把它添加到tab内容中，创建一个新的tab页。

二、动态操作tab项

1.获取当前打开的tab

在JavaScript代码中，可以通过以下代码获得当前打开的tab。

layui.use('element', function(){
  var element = layui.element;
  // 获取当前打开的tab
  var currentTab = element.tabGetCurrent('example');
});

其中，example是tab组的容器ID。

2.关闭tab

在JavaScript代码中，可以通过以下代码关闭tab。

layui.use('element', function(){
  var element = layui.element;
  // 根据ID关闭指定的tab
  element.tabDelete('example', 'tab-id');
});

其中，example是tab组的容器ID，tab-id是tab的ID。

3.切换tab

在JavaScript代码中，可以通过以下代码切换tab。

layui.use('element', function(){
  var element = layui.element;
  // 切换到指定ID的tab
  element.tabChange('example', 'tab-id');
});

其中，example是tab组的容器ID，tab-id是tab的ID。

四、总结

本文介绍了如何使用Layui操作左侧菜单栏及动态操作tab项。通过以上方法，可以快速搭建一个带有左侧菜单栏和多个tab页的前端页面。Layui代码简洁，易于使用，是开发前端页面的好帮手。