Layui之组件的基本使用及案例演示

一.组件的介绍及分类‍

1.组件的介绍

Layui 是一套开源的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用。其风格简约轻盈，而内在雅致丰盈，甚至包括文档在内的每一处细节都经过精心雕琢，非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架，却并非逆道而行，而是信奉返璞归真之道。确切地说，它更多是面向于追求简单的务实主义者，即无需涉足各类构建工具，只需面向浏览器本身，便可将页面所需呈现的元素与交互信手拈来。

我们可以通过Layui提供的组件更简洁美观得美化我们的样式及功能模块

2.Layui组件的分类

Layui的组件大致分为【基础】【通用】【表单】【展示】【交互】等.....

参考文档：在线示例 - Layuihttps://layui.org.cn/demo/index.html

‍♀️个栗子

1. 表格（Table）：提供了灵活的表格展示和操作功能，支持排序、分页、编辑、删除等。

2. 表单（Form）：用于创建各种类型的表单，包括输入框、下拉框、复选框等，支持各种验证规则。

3. 弹层（Layer）：提供弹窗的功能，包括提示框、确认框、加载层等，可以自定义弹窗样式和内容。

4. 树形控件（Tree）：用于展示具有层级结构的数据，支持展开/折叠、选择节点等操作。

5. 分页（Pager）：用于分页展示大量数据，支持异步加载和自定义样式。

6. 导航（Navbar）：可创建导航菜单，支持水平和垂直布局，可以自定义样式和交互。

7. 进度条（Progress）：用于展示任务的进度，支持不同样式和动画效果。

8. 图片轮播（Carousel）：用于展示多张图片的轮播效果，支持自动播放、手动切换等。

9. 日期选择（Date）：提供了日期选择的功能，支持自定义日期格式和范围。

10. 表单自动填充（Autocomplete）：在表单中输入内容时，自动匹配已存在的选项。

这些在我们日常使用中都是非常频繁且适用的

二.实用案例‍

1.标签卡

步骤：

1.1 .参考官方文档(上方已标注)是否有控件/模块，支持完成对应的功能-静态

  

    
网站设置
    
用户管理
    
权限分配
    
商品管理
    
订单管理
  
  

    
内容1
    
内容2
    
内容3
    
内容4
    
内容5
  


  新增Tab项
  删除：商品管理
  切换到：用户管理

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 += '
';
						htmlStr += ''
								+ n.text
								+ '';
						if (n.hasChildren) {
							var children = n.children;
					   		htmlStr += '
';
							$.each(children,function(
													idx,
													node) { // 使用 children 进行遍历
												htmlStr += '
'
														+ node.text
														+ '
'; // 生成子节点的HTML字符串
											});
							htmlStr += '
'; // 注意闭合 
 标签位置
						}
						htmlStr += '
'; // 注意闭合 
 标签位置
					});

	$("#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"%>






<%@include file="/common/header.jsp"%>


	

		

			
layout
				demo
			
			

			
			
			

				

					  tester
				
					

						

							Your Profile
						
						

							Settings
						
					
				
				

					 
				
				
			
		

		

			

				
				

				
			
		

		

			
 

  

    
网站设置
  
  

    
内容1
    
内容2
    
内容3
    
内容4
    
内容5
  

		
		

			
			底部固定区域
		
	
	

总结：

Layui的组件很多，想要自己的网页功能更加完善，界面更加好看，就需要不断得去学习新的组件，先了解该框架有没有该功能，再参考官方文档，文档中有详细注解，总之，Layui是一款开源框架供我们学习使用还是非常友好的

 今天的学习总结就到这里