Layui目录
一、概述
1. 下载
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. 普通折叠面板