今日金句
努力不一定会被看到，但成功会
前言
在上篇博客中，我们用layui实现了后台首页的重要部分——左侧树形菜单，本篇博客将带你通过点击左侧树形菜单实现动态打开选项卡Tab
一、什么是Tab选项卡
Tab广泛应用于Web页面，因此我们也对其进行了良好的支持（简约风格、卡片风格、响应式Tab以及带删除的Tab等等）。Layui内置多种Tab风格，支持删除选项卡、并提供响应式支持。
二、Tab分类
参考地址：layui分页
2.1 默认风格
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>默认风格的Tab</legend> </fieldset> <div class="layui-tab"> <ul class="layui-tab-title"> <li class="layui-this">网站设置</li> <li>用户管理</li> <li>权限分配</li> <li>商品管理</li> <li>订单管理</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> 1. 高度默认自适应，也可以随意固宽。 <br>2. Tab进行了响应式处理，所以无需担心数量多少。 </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>
2.2 动态Tab
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>动态操作Tab</legend> </fieldset> <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 class="site-demo-button" style="margin-bottom: 0;"> <button class="layui-btn site-demo-active" data-type="tabAdd">新增Tab项</button> <button class="layui-btn site-demo-active" data-type="tabDelete">删除：商品管理</button> <button class="layui-btn site-demo-active" data-type="tabChange">切换到：用户管理</button> </div>
2.3 Hash Tab
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>Hash地址定位</legend> </fieldset> <div class="layui-tab" lay-filter="test"> <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"> 点击该Tab的任一标题，观察地址栏变化，再刷新页面。选项卡将会自动定位到上一次切换的项 </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>
2.4 简洁Tab
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>简洁风格的Tab</legend> </fieldset> <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"> <ul class="layui-tab-title"> <li class="layui-this">网站设置</li> <li>用户管理</li> <li>权限分配</li> <li>商品管理</li> <li>订单管理</li> </ul> <div class="layui-tab-content" style="height: 100px;"> <div class="layui-tab-item layui-show">内容不一样是要有，因为你可以监听tab事件（阅读下文档就是了）</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>
2.5 卡片Tab
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>卡片风格的Tab</legend> </fieldset> <div class="layui-tab layui-tab-card"> <ul class="layui-tab-title"> <li class="layui-this">网站设置</li> <li>用户管理</li> <li>权限分配</li> <li>商品管理</li> <li>订单管理</li> </ul> <div class="layui-tab-content" style="height: 100px;"> <div class="layui-tab-item layui-show">默认宽度是相对于父元素100%适应的，你也可以固定宽度。</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 class="layui-tab-item">6</div> </div> </div>
2.6 响应式Tab
当容器的宽度不足以显示全部的选项时，即会自动出现展开图标。
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>当Tab数超过一定宽度</legend> </fieldset> <div class="layui-tab layui-tab-card" style="width: 290px;"> <ul class="layui-tab-title"> <li class="layui-this">网站设置</li> <li>用户管理</li> <li>权限分配</li> <li>商品管理</li> <li>订单管理</li> </ul> <div class="layui-tab-content" style="height: 100px;"> <div class="layui-tab-item layui-show"> 1. 宽度足够，就不会出现右上图标；宽度不够，就会开启展开功能。 <br>2. 如果你的宽度是自适应的，Tab会自动判断是否需要展开，并适用于所有风格。 </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 class="layui-tab-item">6</div> </div> </div>
2.7 带删除的Tab
与其他类别Tab相比没有什么特别的结构，就是多了个属性 lay-allowClose=“true”
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>带删除功能的Tab</legend> </fieldset> <div class="layui-tab layui-tab-card" lay-allowclose="true"> <ul class="layui-tab-title"> <li class="layui-this">网站设置</li> <li>用户基本管理</li> <li>权限分配</li> <li>商品管理</li> <li>订单管理</li> </ul> <div class="layui-tab-content" style="height: 150px;"> <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 class="layui-tab-item">6</div> </div> </div>
2.8 Js代码
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script> <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> <script> layui.use('element', function(){ var $ = layui.jquery ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块 //触发事件 var active = { tabAdd: function(){ //新增一个Tab项 element.tabAdd('demo', { title: '新选项'+ (Math.random()*1000|0) //用于演示 ,content: '内容'+ (Math.random()*1000|0) ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下 }) } ,tabDelete: function(othis){ //删除指定Tab项 element.tabDelete('demo', '44'); //删除：“商品管理” othis.addClass('layui-btn-disabled'); } ,tabChange: function(){ //切换到指定Tab项 element.tabChange('demo', '22'); //切换到：用户管理 } }; $('.site-demo-active').on('click', function(){ var othis = $(this), type = othis.data('type'); active[type] ? active[type].call(this, othis) : ''; }); //Hash地址的定位 var layid = location.hash.replace(/^#test=/, ''); element.tabChange('test', layid); element.on('tab(test)', function(elem){ location.hash = 'test='+ $(this).attr('lay-id'); }); }); </script>
三、实例
3.1 引入html代码
从layui网站或者我上面的分类介绍copy相关代码到页面，导入js等文件
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <%@ include file="../common/head.jsp"%> <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:;"> 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"> 许潜行 </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 src="${pageContext.request.contextPath }/static/js/permission/permissionMain.js"></script> </body> </html>
3.2 编写Js代码
- 新建一个js文件
- 引入新增tab代码```
var element,layer,util,$; //新增一个Tab项 function openTab(){ element.tabAdd('demo', { title: '新选项'+ (Math.random()*1000|0) //用于演示 ,content: '内容'+ (Math.random()*1000|0) ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下 }) } 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){ var html=''; $.each(data,function(i,n){ html += '<li class="layui-nav-item layui-nav-itemed">'; html += '<a class="" href="javascript:;">' + n.text + '</a>'; if (n.hasChildren) { var children=n.children; html += ' <dl class="layui-nav-child">'; $.each(children,function(index,cn){ html += ' <dd><a href="javascript:;" οnclick="openTab()">'+cn.text+'</a></dd>'; }) html += ' </dl>'; } html += '</li>'; }); $("#menu").html(html); element.render('menu'); } });
在这里插入图片描述
3.3 优化1：对应名称、地址、id
//新增一个Tab项 function openTab(title,url,id){ element.tabAdd('demo', { title:title ,content: "<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>" ,id: id }) } } html += ' <dd><a href="javascript:;" οnclick="openTab( \'' + cn.text + '\', \'' + cn.attributes.self.url + '\', \'' +cn.id+ '\')">'+cn.text+'</a></dd>';
3.3 优化2：去重复
var node=$("li[lay-id='"+id+"']"); console.log(node)
点击相同的tab后，我们打印可以看到：id相同的，length会从0开始增加，每点击一次就新增一个长度，那么我们可以通过这个点来优化。
//新增一个Tab项 function openTab(title,url,id){ var node=$("li[lay-id='"+id+"']"); console.log(node) // 判断选项卡是否已存在 if (node.length==0) {//不存在，新增 element.tabAdd('demo', { title:title ,content: "<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>" ,id: id }) } }
3.4 优化3：点击就切换
- 在2.8js代码里有切换代码，copy过来用即可
//新增一个Tab项 function openTab(title,url,id){ var node=$("li[lay-id='"+id+"']"); console.log(node) // 切换到点击的选项卡 element.tabChange('demo', id); // 判断选项卡是否已存在 if (node.length==0) { element.tabAdd('demo', { title:title ,content: "<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>" ,id: id }) // 切换到新增选项卡 element.tabChange('demo', id); } }
附录一：什么是lay-filter 事件过滤器。你可能会在很多地方看到他，他一般是用于监听特定的自定义事件。你可以把它看作是一个ID选择器 附录二：什么是iframe <iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe> iframe是一种HTML元素，它可以在当前网页中嵌入其他网页内容
好啦，本篇分享就到此为止！如果你看完本篇文章有所收获，请不要忘记点个赞，或者留下你的思考与问题，祝你变得更强！！!
