目录
🦁参考官方文档(上方已标注)是否有控件/模块，支持完成对应的功能-静态
🦁组件的介绍及分类
🦁组件的介绍
Layui 是一套开源的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用。其风格简约轻盈，而内在雅致丰盈，甚至包括文档在内的每一处细节都经过精心雕琢，非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架，却并非逆道而行，而是信奉返璞归真之道。确切地说，它更多是面向于追求简单的务实主义者，即无需涉足各类构建工具，只需面向浏览器本身，便可将页面所需呈现的元素与交互信手拈来。
🦁组件的分类
Layui的组件大致分为【基础】【通用】【表单】【展示】【交互】等.....
举个栗子：
表格（Table）：提供了灵活的表格展示和操作功能，支持排序、分页、编辑、删除等。
表单（Form）：用于创建各种类型的表单，包括输入框、下拉框、复选框等，支持各种验证规则。
弹层（Layer）：提供弹窗的功能，包括提示框、确认框、加载层等，可以自定义弹窗样式和内容。
树形控件（Tree）：用于展示具有层级结构的数据，支持展开/折叠、选择节点等操作。
分页（Pager）：用于分页展示大量数据，支持异步加载和自定义样式。
导航（Navbar）：可创建导航菜单，支持水平和垂直布局，可以自定义样式和交互。
进度条（Progress）：用于展示任务的进度，支持不同样式和动画效果。
图片轮播（Carousel）：用于展示多张图片的轮播效果，支持自动播放、手动切换等。
日期选择（Date）：提供了日期选择的功能，支持自定义日期格式和范围。
表单自动填充（Autocomplete）：在表单中输入内容时，自动匹配已存在的选项。
这些在我们日步骤：常使用中都是非常频繁且适用的
🦁实用案例
🦁标签卡
步骤：
🦁参考官方文档(上方已标注)是否有控件/模块，支持完成对应的功能-静态
<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>🦁将静态选项卡转换成动态选项卡
🦁删减后再进行添加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，这里以时间戳模拟下
})
}
🦁将静态标签名变成实际菜单名
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');
}
})
});
🦁再次点击的选项卡会选中不会打开新的选项卡
在打开选项卡的基础上做一个判断并做一个切换选项卡的操作
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>
1143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
