Layui学习笔记

最新推荐文章于 2024-04-18 17:17:12 发布

疯狂行者

最新推荐文章于 2024-04-18 17:17:12 发布

阅读量379

点赞数

分类专栏：前端技术文章标签： layui

本文链接：https://blog.csdn.net/QinTao9961220/article/details/120612043

版权

本文详细介绍了Layui框架的下载、主要内容和使用方法，涵盖了图标、按钮、导航菜单、表单元素等重要组件，并重点讲解了弹出层和数据表格的使用。

摘要由CSDN通过智能技术生成

Layui目录

Layui目录
一、概述
- 1. 下载
- 2.下载文件说明
二、内容
三、使用方法
总结

一、概述

1. 下载

Layui下载

2.下载文件说明

css 样式
font:字体
image:图片
lay:
|–models
|–
layui.all.js 包含了所有模块的js
layui.js 框架如果要使用必须使用layui.use([“table”,“layer”,“laydate”,“form”],function(){})

二、内容

1. 图标

2. 按钮

3. 导航菜单

4. 选项卡

5. 进度条

6. 面板+布局

7. 徽章

8. 时间线

9. 动画

10. 颜色选择器

11. 滑块

12. 评分

13. 轮播

14. 代码修饰器

15. 时间和日期选择器

16. 表单元素

**16.1输入框
16.2密码框
16.3下拉列表**

17. 表单对象form

18. 弹出层【重点】

19. 数据表格【重点】

20. 数据表格+弹出层的综合案例【重点】

21. 文件上传

22. 树形组件dtree

三、使用方法

创建项目并引入layui

在这里插入图片描述

3.1图标

方法1 ：使用字符实体
在这里插入图片描述
相关样式

layui-icon 代表使用layui的图标处理样式去渲染

方法2：使用样式
在这里插入图片描述
相关图标样式可以点击

3.2按钮

相关样式

1，必要样式 layui-btn
2，主题样式
|-- layui-btn-primary 原始按钮
|-- layui-btn-normal 百搭按钮
|-- layui-btn-warm 暖色
|-- layui-btn-danger 警告
|-- layui-btn-disabled 禁用
3，大小样式
|-- layui-btn-lg 大型按钮
|-- layui-btn-sm 小型按钮
|–layui-btn-xs 微型按钮
4，图标结合

在这里插入图片描述

5，圆角样式 layui-btn-radius

6，按钮组 layui-btn-group

3.3事件监听

在这里插入图片描述

3.4导航菜单

**1.相关样式**
	方向：水平 默认的
		 垂直 layui-nav-tree

	其它样式
	  |--layui-nav  代表这个是导航菜单
	  	|-- layui-nav-item  代表这个导航菜单的一样子项
				|-- layui-nav-child  子项目的子项目
				
		|-- layui-this  当前选中的菜单项

在这里插入图片描述

3.5选项卡

**1.	风格说明**
	默认风格 只用加layui-tab
	简洁风格  layui-tab-brief
	卡片风格   layui-tab-card

在这里插入图片描述

**2.	相关样式**
	|--layui-tab  代表一个选项卡
		|--layui-tab-title代表卡片的头
			|-- layui-this  启动选中
		|-- layui-tab-content  代表卡片的内容包装体
			|-- layui-tab-item  具体的卡片内容
			|-- layui-show  启动显示

相关属性
在这里插入图片描述

lay-allowclose是否启动关闭按钮

在这里插入图片描述

lay-filter="demo"  layui使用的可以找到元素的属性

4. 相关代码

<%@ 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>选项卡</title>
  <link rel="stylesheet" href="resources/layui/css/layui.css">
</head>
<body>
             
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>默认风格的Tab</legend>
</fieldset>
 
<div class="layui-tab" id="demo" lay-filter="demo"  lay-allowclose="true">
  <ul class="layui-tab-title" >
    <li lay-id="1" class="mydemo">网站设置</li>
    <li lay-id="2" class="mydemo">用户管理</li>
    <li lay-id="3" class="layui-this mydemo">权限分配</li>
    <li lay-id="4" class="mydemo">商品管理</li>
    <li lay-id="5" class="mydemo">订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item ">
      1. 高度默认自适应，也可以随意固宽。
      <br>2. Tab进行了响应式处理，所以无需担心数量多少。
    </div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item layui-show" >内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
  </div>
</div>
<div class="layui-btn-group">
    <button type="button" class="layui-btn" id="add">添加一个Tab</button>
    <button type="button" class="layui-btn " id="change">切换用户管理</button>
    <button type="button" class="layui-btn" id="delete">删除商品管理</button>
    <button type="button" class="layui-btn" id="deleteAll">删除所有tab</button>
  </div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>简单风格的Tab</legend>
</fieldset>
 
<div class="layui-tab layui-tab-brief">
  <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>


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <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">
    <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>



<script src="resources/layui/layui.js"></script>
<script type="text/javascript">
 	layui.use(['element','jquery'],function(){
		var $=layui.jquery;
		var element=layui.element;
		
		$("#add").click(function(){
			element.tabAdd('demo', {
				  title: '选项卡的标题'
				  ,content: '选项卡的内容' //支持传入html
				});    
		})
		$("#change").click(function(){
			element.tabChange('demo', '2');
		})
		$("#delete").click(function(){
			element.tabDelete("demo", "4");	
		})
		$("#deleteAll").click(function(){
			var lis=$(".mydemo");
			$.each(lis,function(index,item){
				var layid=item.getAttribute("lay-id");
				//alert(layid);
				element.tabDelete("demo", layid);	
			});
		})
	});
</script>
</body>
</html>

3.6进度条

在这里插入图片描述

相关样式
layui-progress   代表一个进度条
	|-- layui-progress-bar    代表进度条里面的进度
layui-progress-big  变粗了
lay-percent  代表进度值
lay-showpercent="true"  是否显示进度值

3.7面板

1. 卡片面板
在这里插入图片描述

相关样式
layui-row  代表一行
layui-col-space15     space0-space30  代表卡片之间的间距
	|-- layui-col-md6  代表一列  md1-md12  代表当前卡片占整行的X/12
		|-- layui-card  代表一个卡片
			|-- layui-card-header 代表卡片头信息
			|-- layui-card-body  代表卡片内容样式

2. 普通折叠面板

最低0.47元/天解锁文章

疯狂行者

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Layui学习笔记

Layui目录Layui目录Layui目录一、概述1. 下载2.下载文件说明二、内容1. 图标2. 按钮3. 导航菜单4. 选项卡5. 进度条6. 面板+布局7. 徽章8. 时间线9. 动画10. 颜色选择器11. 滑块12. 评分13. 轮播14. 代码修饰器15. 时间和日期选择器16. 表单元素17. 表单对象form18. 弹出层【重点】19. 数据表格【重点】20. 数据表格+弹出层的综合案例【重点】21. 文件上传22. 树形组件dtree三、使用方法3.1图标3.2按钮3.3事件监听3.4导
复制链接

扫一扫