【Layui】选项卡Tab：完美实现网页内容分类与导航

Love The Way You Lie 2024-03-17 19:09 51阅读 0赞

**目录**

什么是Layui选项卡？

Layui选项卡的作用

实现步骤

1、编写公共jsp（header.jsp）

2、jsp界面（main.jsp）

3、JS代码（main.js）

4、PermissionDao类的修改

5、最终运行结果

--------------------

## 什么是Layui选项卡？ ##

Layui选项卡是一种基于Layui框架的前端组件，用于创建多个选项卡并在其之间进行切换。Layui是一个轻量级、易用、灵活的前端UI框架，旨在简化前端开发过程。

使用Layui选项卡，你可以在页面中创建多个选项卡标签，每个标签对应一个内容区域。用户可以点击选项卡标签来切换显示相应的内容区域。这种方式常用于页面的分组显示或切换不同的功能模块。

Layui选项卡提供了丰富的配置选项，包括标签样式、选项卡切换的触发事件、内容区域的布局方式等。它还支持动态添加和删除选项卡，以及自定义选项卡的样式和功能。

总之，Layui选项卡是一种方便、灵活的前端组件，可用于创建多个选项卡，并在其之间切换显示不同的内容区域。

## Layui选项卡的作用 ##

1.  **分组显示内容：**Layui选项卡可以将相关的内容分组显示在不同的选项卡中。例如，在一个表单页面中，可以使用选项卡将不同部分的表单内容进行分组，使用户能够更方便地切换查看和编辑不同的表单区域。
2.  **页面布局切换：**Layui选项卡可以用于页面布局的切换。通过将不同的页面布局放置在不同的选项卡中，用户可以在不同的布局之间进行切换，实现页面结构的变化。这在一些需要展示不同类型或不同风格页面的应用中非常有用。
3.  **多标签页管理：**Layui选项卡可以用于创建多标签页的界面，类似于浏览器的标签页功能。每个选项卡可以对应一个页面或功能模块，用户可以通过点击选项卡来快速切换不同的页面或功能，提高用户的操作效率。
4.  **动态控制选项卡**：Layui选项卡支持动态添加和删除选项卡，可以根据业务需求来灵活控制选项卡的数量和内容。这对于需要根据用户操作动态生成选项卡的场景非常有用，可以实现动态的页面切换和内容展示。

Layui选项卡主要用于分组显示内容、页面布局切换、多标签页管理和动态控制选项卡等场景，提供了方便的界面交互和操作方式。

## 实现步骤 ##

我们最终要达到的一个效果  
![1e479a3072b04f72b28017e267a93488.png][]

> **看过我前面的博客都知道，我是在前面博客的基础上继续写的一个案例**
> 
>   
> 首先记住我们这次的博客包、类、jsp界面以及我们的资源放置位置  
>   
> ![2ad7c99440a747cbb7195bc23b634261.png][]

### 1、编写公共jsp（header.jsp） ###

> 在这个里面我和前面的进行了一个修改，并且添加了一个<base>标签

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/layui/css/layui.css">
    
    <script src="${pageContext.request.contextPath }/static/js/layui/layui.js"></script>
    <base href="${pageContext.request.contextPath }/" />

### 2、jsp界面（main.jsp） ###

> 我们在前面已有的界面上进行一个界面的修改，在主内容区域里面添加我们的Tab标签  
> 
> 
>     
>     			<div class="layui-tab" lay-filter="tab" lay-allowclose="true">
>     				<ul class="layui-tab-title">
>     				</ul>
>     				<div class="layui-tab-content">
>     				</div>
>     			</div>

> 整体的JSP界面代码  
> 
> 
>     <%@ page language="java" contentType="text/html; charset=UTF-8"
>     	pageEncoding="UTF-8"%>
>     <!DOCTYPE html>
>     <html>
>     <head>
>     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
>     <title>后台首页</title>
>     <%@include file="/common/header.jsp"%>
>     <script src="static/js/main.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">Layui</div>
>     			
>     			<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>
>     				
>     				<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">
>     				
>     				<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="tab" lay-allowclose="true">
>     				<ul class="layui-tab-title">
>     				</ul>
>     				<div class="layui-tab-content">
>     				</div>
>     			</div>
>     		</div>
>     
>     		<div class="layui-footer">
>     			
>     			底部固定区域
>     		</div>
>     	</div>
>     
>     </body>
>     </html>
> 
> 我在JSP的界面添加了一个导入js的标签，在后面的代码里面做铺垫
> 
>     <script src="static/js/main.js"></script>

### 3、JS代码（main.js） ###

> 可以在刚开始的资源放置位置图和JSP界面编写的代码可以看出，我们的js代码进行了一个**分开的编写**，并没有在**JSP**界面进行一个编写

var element,layer,util,$;
    layui.use(['element', 'layer', 'util'], function(){
      element = layui.element
      ,layer = layui.layer
      ,util = layui.util
      ,$ = layui.$;
     
      $.ajax({
    		url : 'tree.action?methodName=menus',
    		method : 'post',
    		dataType : 'json',
    		success : function(data) {
    			console.log(data);
    			var htmlTree="";
    			$.each(data,function(index,node){
    				htmlTree+='<li class="layui-nav-item layui-nav-itemed">';
    				
    				htmlTree+='<a href="javascript:;">'+node.text+'</a>';
    				
    				if (node.hasChildren) {
    					var children=node.children;
    					htmlTree+='<dl class="layui-nav-child">';
    					$.each(children,function(i,n){
    						htmlTree+='<dd><a href="javascript:;" onclick="OpenTabAdd(\''+n.text+'\',\''+n.attributes.self.url+'\',\''+n.id+'\')">'+n.text+'</a></dd>';
    					});
    					htmlTree+='</dl>';
    				}
    				
    				htmlTree+='</li>';
    			});
    			
    			$("#menu").html(htmlTree);
    			/* 进行渲染 */
    			element.render('menu');
    				} 
    			});
      
    });
    
    	function OpenTabAdd(title,content,id){
    		var $node = $('li[lay-id="' + id + '"]');
    	// 如果点击的树形菜单在Tab里面有选项卡了就不添加，没有就添加
    	if ($node.length == 0) {
    			 // 新增一个Tab项
    		      element.tabAdd('tab', {
    		        title: title
    		        ,content: "<iframe frameborder='0' src='"+content+"' scrolling='auto' style='width:100%;height:100%;'></iframe>"
    		        ,id: id
    		      });
    		}
    	element.tabChange('tab', id); // 切换
    		
    		     
    	}

>     var $node = $('li[lay-id="' + id + '"]');
> 
> 这一行代码用来获取你点击的树形菜单
> 
>     element.tabChange('tab', id); // 切换
> 
> 这一行代码用来获取点击的tab进行一个跳转  
>

### 4、PermissionDao类的修改 ###

> 我们在js的代码里面看到过这行代码  
> 
> 
>     htmlTree+='<dd><a href="javascript:;" onclick="OpenTabAdd(\''+n.text+'\',\''+n.attributes.self.url+'\',\''+n.id+'\')">'+n.text+'</a></dd>';
> 
> 我们在编写PermissionDao里面的方法的时候没有添加我们的url，所以我们获取不到url，
> 
> 我们要更改PermissionDao里面的menus方法
> 
>     /**
>     	 * 将数据库的平级数据，转换为父子关系数据
>     	 * 
>     	 * @param permission
>     	 * @param pageBean
>     	 * @return
>     	 * @throws Exception
>     	 */
>     	public List<TreeVo<Permission>> menus(Permission permission, PageBean pageBean) throws Exception {
>     
>     		List<TreeVo<Permission>> listtp = new ArrayList<>();
>     		List<Permission> list = this.listPermission(permission, pageBean);
>     		for (Permission p : list) {// 把我们的平级对象转换为父级关系
>     			TreeVo<Permission> tv = new TreeVo<>();
>     			tv.setId(p.getId() + "");
>     			tv.setText(p.getName());
>     			tv.setParentId(p.getPid() + "");
>     			// 添加tab--url
>     			Map<String, Object> maps = new HashMap<>();
>     			maps.put("self", p);
>     			// 我们不可能在TreeVo里面建Permission所有的属性，可以用map集合保存起来并存储在TreeVo里面
>     			tv.setAttributes(maps);
>     
>     			listtp.add(tv);
>     		}
>     		// 这是我们还没有构建父子关系
>     		// return listtp;
>     		// 我们要做一个外层循环和一个内层循环
>     		return BuildTree.buildList(listtp, "-1");
>     	}
> 
> 我们用Map集合添加了Permission里面的所有属性
> 
> 我们可以用jsp界面打印一下
> 
> ![17bb6d67c9fb4f23aec6811ec5ada3a3.png][]  
> 这下我们就有了url，我们就可以拿到url了。  
> 就可以用n.attributes.self.url传到我们的方法里面去

**完整的PermissionDao类方法**

package com.zking.dao;
    
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    import com.zking.entity.Permission;
    import com.zking.util.BaseDao;
    import com.zking.util.BuildTree;
    import com.zking.util.PageBean;
    import com.zking.util.TreeVo;
    
    /**
     * dao方法
     * 
     * @author tgq
     *
     */
    public class PermissionDao extends BaseDao<Permission> {
    
    	/**
    	 * 查询导所有的
    	 * 
    	 * @param permission
    	 * @param pageBean
    	 * @return
    	 * @throws Exception
    	 */
    	public List<Permission> listPermission(Permission permission, PageBean pageBean) throws Exception {
    		String sql = "select * from t_oa_Permission";
    		return super.executeQuery(sql, Permission.class, pageBean);
    	}
    
    	/**
    	 * 将数据库的平级数据，转换为父子关系数据
    	 * 
    	 * @param permission
    	 * @param pageBean
    	 * @return
    	 * @throws Exception
    	 */
    	public List<TreeVo<Permission>> menus(Permission permission, PageBean pageBean) throws Exception {
    
    		List<TreeVo<Permission>> listtp = new ArrayList<>();
    		List<Permission> list = this.listPermission(permission, pageBean);
    		for (Permission p : list) {// 把我们的平级对象转换为父级关系
    			TreeVo<Permission> tv = new TreeVo<>();
    			tv.setId(p.getId() + "");
    			tv.setText(p.getName());
    			tv.setParentId(p.getPid() + "");
    			// 添加tab--url
    			Map<String, Object> maps = new HashMap<>();
    			maps.put("self", p);
    			// 我们不可能在TreeVo里面建Permission所有的属性，可以用map集合保存起来并存储在TreeVo里面
    			tv.setAttributes(maps);
    
    			listtp.add(tv);
    		}
    		// 这是我们还没有构建父子关系
    		// return listtp;
    		// 我们要做一个外层循环和一个内层循环
    		return BuildTree.buildList(listtp, "-1");
    	}
    
    }

### 5、最终运行结果 ###

![3b1af7f39d6c4c5caac9c912d7b1e334.png][]

希望对你们有帮助！！！

[1e479a3072b04f72b28017e267a93488.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/ba0b83a039cc4932a0307662afe4e2e8.png
[2ad7c99440a747cbb7195bc23b634261.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/a0e690baebd74ab7bb28db0a4c5c5a96.png
[17bb6d67c9fb4f23aec6811ec5ada3a3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/9a54c480704c4445ab6220d004287ec7.png
[3b1af7f39d6c4c5caac9c912d7b1e334.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/e369c1bf76b44cb4a6d7b2726ae808fa.png