🦁组件的介绍及分类
🦁组件的介绍
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>
