Layui的选项卡及菜单-阿里云开发者社区

一.介绍

Layui 的选项卡（Tab）组件是一种常用的界面交互组件，它能够使用户在一组相关信息之间进行切换，以达到更好的用户体验。选项卡通常用于分类信息、展示内容、切换界面等场景。

Layui 的选项卡组件有以下特点：

界面简洁：选项卡采用了简单的 CSS 样式进行设计，使用户界面简洁明了。
易于使用：通过简单的 HTML 标记即可快速创建选项卡，同时可自定义样式和行为。
功能丰富：选项卡组件支持多种事件和功能，例如选项卡切换、选项卡添加、删除、禁用等操作。

Layui 的选项卡组件是一个功能强大、易于使用的界面组件，能够为用户提供更好的体验和优化界面交互。

二、选项卡的使用

选项卡（Tab）是一种常用的界面交互组件，在多个相关信息之间切换时常使用。选项卡可用于分类信息、展示内容、切换界面等场景。以下是一般使用选项卡的步骤：

在 HTML 页面中定义选项卡的父容器，并设置选项卡的标题和内容。通常使用 <ul> 和 <li> 标签设置标题，然后使用 <div> 标签包含每个选项卡的内容。
为每个选项卡内容设置唯一的 ID，以便之后做切换操作时能够准确定位每个选项卡。
在 JavaScript 中初始化选项卡。选项卡组件通常需要初始化和设置样式。
为选项卡设置样式和行为。通常在 CSS 文件中定义选项卡的外观样式，例如背景颜色、字体大小、边框等；在 JavaScript 文件中定义选项卡的行为样式，例如选项卡切换动画、选项卡悬停效果等，以提升用户体验。

下面是一个使用选项卡的示例代码：

<div class="tab-container">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#messages" data-toggle="tab">Messages</a></li>
    <li><a href="#settings" data-toggle="tab">Settings</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="home">Home content</div>
    <div class="tab-pane" id="profile">Profile content</div>
    <div class="tab-pane" id="messages">Messages content</div>
    <div class="tab-pane" id="settings">Settings content</div>
  </div>
</div>

在上面的示例代码中，选项卡用 <ul> 和 <li> 标签定义，选项卡内容则用 <div> 标签包含，并设置 tab-pane 类。在 JavaScript 中使用 Bootstrap 的 JavaScript 插件来初始化选项卡：

$('.nav-tabs a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});

通过以上代码，即可实现选项卡组件的基本功能。

请注意，此示例代码使用了 Bootstrap 框架的选项卡组件。其他前端框架（如 Layui、Element UI 等）也提供了选项卡组件，应根据具体情况选择适合的选项卡组件。

三、选项卡和菜单联动

要将Layui的模板应用到自己的项目中，可以按照以下思路和流程进行：

--下载和引入Layui：首先，在Layui的官网（https://www.layui.com/）上下载最新版本的Layui。然后，将Layui的样式文件（layui.css）和JavaScript文件（layui.js）引入到自己的项目中。
--创建基础页面结构：根据自己的项目需求，创建基础的HTML页面结构。可以参考Layui的模板示例或根据自己的设计要求自定义页面结构。确保页面中包含一个合适的容器，用于显示模板的内容。
--配置Layui模块：在需要使用Layui模板的页面中，引入Layui的模块。使用Layui的layui.config()方法配置模板所需的模块路径，以确保Layui的模块可以正常加载。
--加载并渲染模板：通过Layui的laytpl模块，加载并渲染模板文件。可以通过AJAX请求获取模板文件，或直接将模板内容写在JavaScript中。使用laytpl的render()方法将数据源和模板进行渲染，并将渲染结果插入到页面中指定的容器中。
--数据绑定和动态更新：如果模板需要根据数据源动态更新内容，可以使用Layui的laytpl模块提供的数据绑定功能。通过在模板中使用{{ }}占位符来指定绑定的数据字段，然后在渲染时将实际数据传入，从而实现动态更新的效果。
--自定义样式和交互：根据自己的设计要求，可以对Layui的模板进行样式和交互的定制。通过修改模板的CSS样式或绑定自定义事件来实现特定的视觉效果和交互行为。
--测试和调试：在完成模板的应用后，通过测试和调试来确保模板在自己的项目中正常工作，并满足项目的需求和预期效果。

以上是将Layui的模板应用到自己项目中的基本思路和流程。具体的操作和细节可能会因项目的不同而有所差异。可以结合Layui的文档和示例代码，根据自己的项目需求进行相应的调整和扩展。

以下的实例效果是本人博客中Layui动态树实现的效果显示如图:

提示 : 以下操作基于本人博客中(LayUI动态树)的所有代码进行

3.1.OrdersDao优化

以下是OrdersDao订单方法类(Dao层数据访问)的优化后的整合代码

package com.junlinyi.dao;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.junlinyi.entity.Orders;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.util.BaseDao;
import com.zking.util.BuildTree;
import com.zking.util.PageBean;
import com.zking.util.TreeVo;
/**
 * @author linyi.Jun
 * @com.junlinyi.dao
 * @OrdersDao(说明):订单菜单的方法类(Dao层)
 */
public class OrdersDao extends BaseDao<Orders>{
  /**
   * @param order
   * @param pageBean
   * @return 获取t_easyui_permission数据表中所有数据
   * @throws Exception
   */
  public List<Orders> list(Orders order, PageBean pageBean) throws Exception {
    String sql="select * from t_easyui_permission";
    return super.executeQuery(sql, Orders.class, pageBean);
  }
  /**
   * @param order
   * @param pageBean
   * @return 将查询后的平级数据转换为父子关系的数据
   * @throws Exception
   */
  public List<TreeVo<Orders>> menus(Orders order, PageBean pageBean)throws Exception {
    //创建一个容器保存数据转换后的父子关系的数据
    List<TreeVo<Orders>> trpe = new ArrayList<TreeVo<Orders>>();
    //获取所有平级数据
    List<Orders> list = this.list(order, pageBean);
    //循环
    for (Orders p : list) {
      TreeVo<Orders> tp = new TreeVo<Orders>();
      //long强转String类型
      tp.setId(p.getId()+"");
      tp.setText(p.getName());
      tp.setParentId(p.getPid()+"");
      //将TreeVo中的Attributes属性增加相对应实体对象，用于前端的菜单点击后创建对应的选项卡内容为相对的url
      Map<String, Object> maps = new HashMap<String, Object>();
      maps.put("tvp", p);
      tp.setAttributes(maps);
      trpe.add(tp);
    }
    //返回调用工具类的方法将容器里的数据转成有父子关系的数据
    return BuildTree.buildList(trpe,"0");
  }
  //数据测试
  public static void main(String[] args) throws Exception {
    List<TreeVo<Orders>> list = new OrdersDao().menus(null, null);
    ObjectMapper om = new ObjectMapper();
    System.out.println(om.writeValueAsString(list));
  }
}

3.2.JSP页面的优化

index.jsp页面中动态树(左侧的菜单)和选项卡的联动

进行修改/优化index.jsp后的代码如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
  <%@include file="common/header.jsp" %>
  <!-- <script type="text/javascript" src="js/index.js"></script> -->
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>
      <!-- Top导航栏 -->
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">nav groups</a>
        <dl class="layui-nav-child">
          <dd><a href="">menu 11</a></dd>
          <dd><a href="">menu 22</a></dd>
          <dd><a href="">menu 33</a></dd>
        </dl>
      </li>
    </ul>
    <!-- 个人头像及账号操作 -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
          tester
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">Your Profile</a></dd>
          <dd><a href="">Settings</a></dd>
          <dd><a href="login.jsp">Sign out</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">
      </ul>
    </div>
  </div>
  <div class="layui-body">
    <!-- 内容主体区域 -->
<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
  <ul class="layui-tab-title">
    <li class="layui-this" lay-id="11">网站设置</li>
  </ul>
  <div class="layui-tab-content">
    <div  class="layui-tab-item layui-show">内容1</div>
  </div>
</div>
  </div>
  <div class="layui-footer">
    <!-- 底部固定区域 -->
            底部固定区域
  </div>
</div>
<script>
let element,layer,util,$;
layui.use(['element', 'layer', 'util'], function(){
   element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,$ = layui.$;
  $.ajax({
    url:"${pageContext.request.contextPath }/orders.action?methodName=menus",
    dataType:'json',
      success:function(data){
      /* console.log(data); */
      /* 定义标签要拼接的文本内容  */
      let datacontent = '';
      $.each(data,function(i,n){
        datacontent += ' <li class="layui-nav-item layui-nav-itemed">';
        datacontent +='<a class="" href="javascript:;">'+n.text+'</a>';
        /* console.log(n); */
        /* 判断是否有子节点有就进行子菜单增加，没有就不加 */
        if(n.hasChildren){
          datacontent +='<dl class="layui-nav-child">';
          /* 循环所有的子节点  n.children*/
          $.each(n.children,function(index,node){
             datacontent += '<dd><a href="javascript:;" onclick="AddTab(\''+node.text+'\',\''+node.attributes.tvp.url+'\',\''+node.id+'\')" >'+node.text+'</a></dd>'; 
          })
          datacontent += ' </dl> ';
        }
        datacontent += ' </li> ';
      })
      /* 重置里面的文本内容 */
      $("#menu").html(datacontent);
      element.render('menu');
    }
     });
  });
 /* 使用Layui的思路流程
  * 1.参考官网是否有该功能的控件，该控件模块是否可以在支持相对应的功能效果--为静态
  * 2.将官网的静态模块转换为相当应的动态功能(将静态选项卡转换为相对应左边菜单的功能动态选项卡)
  * 3.功能效果实现后进行修改/优化，使该功能融入到自己的项目中实现自己所需下效果
  *  3.1 将选项卡的名称对应左侧菜单
  *  3.2 重复选中的选项卡不会多次打开
  *  3.3  如果重复选中，就只显示选中的选项卡页面bg/listOrder1.jsp
  */
  function AddTab(title,content,id) {
   let $node = $('li[lay-id="'+id+'"]');
   if($node.length==0){
    //新增一个Tab项
          element.tabAdd('demo', {
            title: title //用于演示
            ,content: "<iframe frameborder='0' src='"+content+"' scrolling='auto' style='width:100%;height:100%;'></iframe>"
            ,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
          })
   }
   element.tabChange('demo', id); //切换到：用户管理
}
</script>
</body>
</html>

3.3.代码整合

第一在项目中创建一个专门放静态资源的文件(static)
再在静态资源的文件(static)中，创建css，js，images等等的静态资源
然后将html和js及css的代码分别放入静态资源文件中(static)

在静态资源js中创建index的js资源文件将jsp中的js代码全部放入index的js资源文件里

再在jsp页面进行引入index.js资源文件

最后整合的jsp及js代码如下

index.jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
  <%@include file="common/header.jsp" %>
  <!-- <script type="text/javascript" src="js/index.js"></script> -->
</head>
<script src="static/js/index.js"></script>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>
      <!-- Top导航栏 -->
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">nav groups</a>
        <dl class="layui-nav-child">
          <dd><a href="">menu 11</a></dd>
          <dd><a href="">menu 22</a></dd>
          <dd><a href="">menu 33</a></dd>
        </dl>
      </li>
    </ul>
    <!-- 个人头像及账号操作 -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
          tester
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">Your Profile</a></dd>
          <dd><a href="">Settings</a></dd>
          <dd><a href="login.jsp">Sign out</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">
      </ul>
    </div>
  </div>
  <div class="layui-body">
    <!-- 内容主体区域 -->
<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
  <ul class="layui-tab-title">
    <li class="layui-this" lay-id="11">网站设置</li>
  </ul>
  <div class="layui-tab-content">
    <div  class="layui-tab-item layui-show">内容1</div>
  </div>
</div>
  </div>
  <div class="layui-footer">
    <!-- 底部固定区域 -->
            底部固定区域
  </div>
</div>
</body>
</html>

index.js静态资源代码

let element,layer,util,$;
layui.use(['element', 'layer', 'util'], function(){
   element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,$ = layui.$;
  $.ajax({
    url:"${pageContext.request.contextPath }/orders.action?methodName=menus",
    dataType:'json',
      success:function(data){
      /* console.log(data); */
      /* 定义标签要拼接的文本内容  */
      let datacontent = '';
      $.each(data,function(i,n){
        datacontent += ' <li class="layui-nav-item layui-nav-itemed">';
        datacontent +='<a class="" href="javascript:;">'+n.text+'</a>';
        /* console.log(n); */
        /* 判断是否有子节点有就进行子菜单增加，没有就不加 */
        if(n.hasChildren){
          datacontent +='<dl class="layui-nav-child">';
          /* 循环所有的子节点  n.children*/
          $.each(n.children,function(index,node){
             datacontent += '<dd><a href="javascript:;" onclick="AddTab(\''+node.text+'\',\''+node.attributes.tvp.url+'\',\''+node.id+'\')" >'+node.text+'</a></dd>'; 
          })
          datacontent += ' </dl> ';
        }
        datacontent += ' </li> ';
      })
      /* 重置里面的文本内容 */
      $("#menu").html(datacontent);
      element.render('menu');
    }
     });
  });
 /* 使用Layui的思路流程
  * 1.参考官网是否有该功能的控件，该控件模块是否可以在支持相对应的功能效果--为静态
  * 2.将官网的静态模块转换为相当应的动态功能(将静态选项卡转换为相对应左边菜单的功能动态选项卡)
  * 3.功能效果实现后进行修改/优化，使该功能融入到自己的项目中实现自己所需下效果
  *  3.1 将选项卡的名称对应左侧菜单
  *  3.2 重复选中的选项卡不会多次打开
  *  3.3  如果重复选中，就只显示选中的选项卡页面bg/listOrder1.jsp
  */
  function AddTab(title,content,id) {
   let $node = $('li[lay-id="'+id+'"]');
   if($node.length==0){
    //新增一个Tab项
          element.tabAdd('demo', {
            title: title //用于演示
            ,content: "<iframe frameborder='0' src='"+content+"' scrolling='auto' style='width:100%;height:100%;'></iframe>"
            ,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
          })
   }
   element.tabChange('demo', id); //切换到：用户管理
}

效果如图：

好啦今天就到这里了，希望能帮到你哦！！！

Layui的选项卡及菜单

一.介绍

二、选项卡的使用

三、选项卡和菜单联动

3.1.OrdersDao优化

3.2.JSP页面的优化

3.3.代码整合

热门文章

最新文章

相关电子书