本文介绍了LayUI中的选项卡功能，包括基本使用方法和如何将静态选项卡转换为动态选项卡，同时展示了如何通过JavaScript处理重名选项卡，以及在实际项目中进行重构，将内容从JSP分离到独立的JS文件中。
2.layui选项卡：
目录：
1.什么是选项卡：
在layui中，选项卡（Tab）是一种常用的页面布局元素，用于在同一页面上展示多个内容区域并切换显示。选项卡通常由一组水平或垂直的标签（Tab）和对应的内容区域组成。
在layui中，可以使用element模块的tab方法来实现选项卡功能。具体使用步骤如下：
通过下面这些代码可以形成一个简单的选项卡：
- 引入layui库文件和相关样式：
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
2.创建HTML结构，定义标签和内容区域：
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
</div>
</div>
3.调用layui的选项卡方法进行初始化：
layui.use(['element'], function(){
var element = layui.element;
// 初始化选项卡
element.tab();
});2.layui选项卡：
1.把选项卡嵌入到项目里面（还没有优化的 ）：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="common/header.jsp" %>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>后台主页</title>
</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>
<li lay-id="22">用户管理</li>
<li lay-id="33">权限分配</li>
<li lay-id="44">商品管理</li>
<li lay-id="55">订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
<div class="layui-tab-item">内容4</div>
<div class="layui-tab-item">内容5</div>
</div>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
底部固定区域
</div>
</div>
<script>
//JS
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element
,layer = layui.layer
,util = layui.util
,$ = layui.$;
$.ajax({
url:"${pageContext.request.contextPath }/permission.action?methodName=menus",
dataType:'json',
success:function(data){
console.log(data);
var htmlStr='';
$.each(data,function(i,n){
htmlStr +=' <li class="layui-nav-item layui-nav-itemed">';
htmlStr +='<a class="" href="javascript:;">'+n.text+'</a>';
if(n.hasChildren){
var children= n.children;
htmlStr +=' <dl class="layui-nav-child">';
$.each(children,function(idx,node){
htmlStr +=' <dd><a href="javascript:;">'+node.text+'</a></dd>';
})
htmlStr +=' </dl>';
}
htmlStr +=' </li>';
})
$("#menu").html(htmlStr);
element.render('menu');
}
});
});
</script>
</body>
</html>输出结果：
1. 将静态的选项卡转换为动态的选项卡:
2.将选项卡的标签名变成实际菜单名 :
htmlStr +='
<dd>
<a href="javascript:;" onclick="openTab(\''+node.text+'\',\''+node.attributes.self.url+'\',\''+node.id+'\')">
'+node.text+'</a></dd>';3.重名的选项卡不能打开新的:
if($node.length == 0){
//将静态的选项卡转换为动态的选项卡
element.tabAdd('demo', {
title: title //用于演示
,content: content
,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
})
}4.重名选项卡需要未选中:
如果这张表有很多字段，就用map集合,把当前表对应的数据放进map集合里面 :
所有代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="common/header.jsp" %>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>后台主页</title>
</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">
<!-- 内容主体区域 -->
<!-- 3.将选项卡的标签名变成实际菜单名
-->
<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>
//JS
var element,layer,util,$;
layui.use(['element', 'layer', 'util'], function(){
element = layui.element
,layer = layui.layer
,util = layui.util
,$ = layui.$;
$.ajax({
url:"${pageContext.request.contextPath }/permission.action?methodName=menus",
dataType:'json',
success:function(data){
console.log(data);
var htmlStr='';
$.each(data,function(i,n){
htmlStr +=' <li class="layui-nav-item layui-nav-itemed">';
htmlStr +='<a class="" href="javascript:;">'+n.text+'</a>';
if(n.hasChildren){
var children= n.children;
htmlStr +=' <dl class="layui-nav-child">';
$.each(children,function(idx,node){
// 3.将选项卡的标签名变成实际菜单名
htmlStr +=' <dd><a href="javascript:;" onclick="openTab(\''+node.text+'\',\''+node.attributes.self.url+'\',\''+node.id+'\')">'+node.text+'</a></dd>';
})
htmlStr +=' </dl>';
}
htmlStr +=' </li>';
})
$("#menu").html(htmlStr);
element.render('menu');
}
});
});
/**
* 1.参考官网是否有空间/模块能够支撑完对应功能--静态
2.将静态的选项卡转换为动态的选项卡
3.将选项卡的标签名变成实际菜单名
4.重名的选项卡不能打开新的
5.重名选项卡需要未选中
*/
function openTab(title,content,id){
var $node = $('li[lay-id="'+id+'"]');
console.log($node);
/* 4.重名的选项卡不能打开新的
*/
if($node.length == 0){
//将静态的选项卡转换为动态的选项卡
element.tabAdd('demo', {
title: title //用于演示
,content: content
,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
})
}
/* 5.重名选项卡需要未选中 */
element.tabChange('demo', id); //切换到：用户管理
}
</script>
</body>
</html>输出结果：
3.项目重构：
先建立一个login.js和main.js:
再把login.jsp里面的内容复制到login.js:
再把main.jsp里面的内容复制到main.js:
var element,layer,util,$;
layui.use(['element', 'layer', 'util'], function(){
element = layui.element
,layer = layui.layer
,util = layui.util
,$ = layui.$;
$.ajax({
url:"permission.action?methodName=menus",
dataType:'json',
success:function(data){
console.log(data);
var htmlStr='';
$.each(data,function(i,n){
htmlStr +=' <li class="layui-nav-item layui-nav-itemed">';
htmlStr +='<a class="" href="javascript:;">'+n.text+'</a>';
if(n.hasChildren){
var children= n.children;
htmlStr +=' <dl class="layui-nav-child">';
$.each(children,function(idx,node){
// 3.将选项卡的标签名变成实际菜单名
htmlStr +=' <dd><a href="javascript:;" onclick="openTab(\''+node.text+'\',\''+node.attributes.self.url+'\',\''+node.id+'\')">'+node.text+'</a></dd>';
})
htmlStr +=' </dl>';
}
htmlStr +=' </li>';
})
$("#menu").html(htmlStr);
element.render('menu');
}
});
});
/**
* 1.参考官网是否有空间/模块能够支撑完对应功能--静态
2.将静态的选项卡转换为动态的选项卡
3.将选项卡的标签名变成实际菜单名
4.重名的选项卡不能打开新的
5.重名选项卡需要未选中
*/
function openTab(title,content,id){
var $node = $('li[lay-id="'+id+'"]');
console.log($node);
/* 4.重名的选项卡不能打开新的
*/
if($node.length == 0){
//将静态的选项卡转换为动态的选项卡
element.tabAdd('demo', {
title: title //用于演示
,content: "<iframe frameborder='0' src='"+content+"' scrolling='auto' style='width:100%;height:100%;'></iframe>"
,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
})
}
/* 5.重名选项卡需要未选中 */
element.tabChange('demo', id); //切换到：用户管理
}
输出结果：
扫一扫
1748
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
