二.实用案例👨🏻💻
1.标签卡
步骤：
1.1 .参考官方文档(上方已标注)是否有控件/模块，支持完成对应的功能-静态
<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>
1.2.将静态选项卡转换成动态选项卡
1.2.1删减后再进行添加Js代码实现将静态选项卡转换成动态选项卡
//新增一个Tab项 function openTab(title,content,id){ element.tabAdd('demo', { title: '新选项'+ (Math.random()*1000|0) //用于演示 ,content: '内容'+ (Math.random()*1000|0) ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下 }) }
效果：
1.3.将静态标签名变成实际菜单名
var element,layer,util,$; layui.use( ['jquery', '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) { // 使用 children 进行遍历 htmlStr += '<dd><a href="javascript:;" onclick="openTab(\''+node.text+'\',\''+node.attributes.self.url+'\',\''+node.id+'\')">' + node.text + '</a></dd>'; // 生成子节点的HTML字符串 }); htmlStr += '</dl>'; // 注意闭合 <dl> 标签位置 } htmlStr += '</li>'; // 注意闭合 <li> 标签位置 }); $("#menu").html(htmlStr); element.render('menu'); } }) });
1.4.再次点击的选项卡会选中不会打开新的选项卡
在打开选项卡的基础上做一个判断并做一个切换选项卡的操作
function openTab(title,content,id){ // 新增一个 tab 项 var $node = $('li[lay-id="'+id+'"]'); if($node.length ==0){ element.tabAdd('demo', { title:title //用于演示 ,content: content ,id: id //实际使用一般是规定好的id，这里以时间戳模拟下 }) } element.tabChange('demo',id);//切换选项卡 }
注：
中的demo对应的是
中的demo
在将静态数据变成动态数据时需要将前端代码改写成
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="static/js/index.js"></script> <%@include file="/common/header.jsp"%> </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"> </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> </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 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 </script> </body> </html>
总结：
Layui的组件很多，想要自己的网页功能更加完善，界面更加好看，就需要不断得去学习新的组件，先了解该框架有没有该功能，再参考官方文档，文档中有详细注解，总之，Layui是一款开源框架供我们学习使用还是非常友好的
今天的学习总结就到这里💪💪💪
