目录
一.介绍
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); //切换到：用户管理
}效果如图：
好啦今天就到这里了，希望能帮到你哦！！！ 
扫一扫
3830
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
