LayUi的使用
layUI的使用
·
LayUI
1、入门
1、layui的下载
官网地址：https://www.layui.com/
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nmu4bEC4-1663310345434)(图片/image-20210727221242747.png)]](https://i-blog.csdnimg.cn/blog_migrate/51d80296eb079a78672983179d71f37a.png)
2、下载文件说明
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jLlJKxUe-1663310345435)(图片/image-20210727221920305.png)]](https://i-blog.csdnimg.cn/blog_migrate/ed3b70d53f0a3a972890decdedd16bf5.png)
layui.js: 这是框架所需的js，如果要使用layui框架的组件，就必须通过 layui.user(“组件名称”) //来使用
2、图标组件
有2种使用方式
方式1:字符实体----------------使用这种方式，需要把它放到容器标签中，才会生效，否则浏览器会把它识别为一个字符，来显示
例： <div class="layui-icon"></div> //注意：容器标签，必须给layui-icon样式，这个图标才会生效
方式2:使用样式----把它当做一个css样式，来使用
<div class="layui-icon layui-icon-heart-fill"></div>//注意：还得在前面加layui-icon 才能识别出来是图标样式
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jXUoAa61-1663310345436)(图片/image-20210727231839600.png)]](https://i-blog.csdnimg.cn/blog_migrate/21787f480ce60ea1f16bd01d2add6917.png)
案例演示
1、创建项目------------就是普通的项目
2、编写代码，进行使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>layui图标的使用</title>
<!-- 1、把layui的css样式引入进来 -->
<link rel="stylesheet" href="layui/css/layui.css">
<!-- 2、把layui所需的js引入进来 -->
<script src="layui/layui.js"></script>
</head>
<body>
<!-- 使用方式1、 -->
<div class="layui-icon"></div>
<!-- 使用方式2、 -->
<div class="layui-icon layui-icon-heart-fill"></div>
</body>
</html>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DNPs5lb6-1663310345437)(图片/image-20210727231925128.png)]](https://i-blog.csdnimg.cn/blog_migrate/5f02d7a39e1f6a49970e1dba52a77795.png)
3、按钮
所需的HTML标签：只要是个容器标签就行----------------比如：div、span
所需的样式：
按钮组件的样式：layui-btn //必须写-----------------否则，layui的按钮效果不生效
其他主题样式：
- layui-btn-primary 原始样式
- layui-btn-normal 百搭样式
- layui-btn-warm 暖色
- layui-btn-danger 警告
- layui-btn-disabled 禁用
按钮尺寸：
- layui-btn-lg 大型
- layui-btn-sm 小型
- layui-btn-xs 微型
圆角按钮：layui-btn-radius
按钮组
- 核心，在按钮的最外层，添加一层div，然后设置它的css样式layui-btn-group
<div class="layui-btn-group"> <button type="button" class="layui-btn">增加</button> <button type="button" class="layui-btn ">编辑</button> <button type="button" class="layui-btn">删除</button> </div>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PixKr9HC-1663310345437)(图片/image-20210731153549464.png)]](https://i-blog.csdnimg.cn/blog_migrate/98b1194883b26905397057ad5ce79cdb.png)
给按钮，添加事件
- 注意：这里需要使用到layui中提供的jquery插件，所以需要先引用插件，才能使用
// 给layui的button按钮，添加事件 layui.use("jquery",function(){//使用layui提供的jquery模块 var $=layui.jquery; //需要先声明，才能使用layui提供的jquery---------这个jquery是在layui.js文件中，存放的【可以理解为，它也是layui的一个js插件】 //这里就跟jquery一样了 $(".layui-btn").click(function(){ alert($(this).html());//获取当前用户，所点击的内容 }) })
案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 1、把layui的css样式引入进来 -->
<link rel="stylesheet" href="layui/css/layui.css">
<!-- 2、把layui所需的js引入进来 -->
<script src="layui/layui.js"></script>
<title>layui button按钮的使用</title>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>1、按钮主题----给按钮设置颜色</legend>
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-primary">原始按钮</button>
<button type="button" class="layui-btn">默认按钮</button>
<button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
<button type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
<button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
<button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
<!-- 注意事项：它这里，只要加了class样式，就行 不限定所在html标签【比easyUI通用】 -->
<a class="layui-btn layui-btn-primary">原始按钮</a>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>2、按钮尺寸----给按钮设置大小</legend>
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-lg">大型按钮</button>
<button type="button" class="layui-btn">默认按钮</button>
<button type="button" class="layui-btn layui-btn-sm">小型按钮</button>
<button type="button" class="layui-btn layui-btn-xs">微形按钮</button>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>3、图标按钮-----给按钮设置图标</legend>
<div class="layui-btn-container">
<!--写法1--> -->
<button type="button" class="layui-btn">
<i class="layui-icon"></i>
</button>
<!--写法2-->
<button type="button" class="layui-btn">
<i class="layui-icon layui-icon-mike"></i>你好
</button>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>4、还可以是圆角按钮</legend>
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
<button type="button" class="layui-btn layui-btn-radius">默认按钮</button>
<button type="button" class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
<button type="button" class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
<button type="button" class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
<button type="button" class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>5、按钮组</legend>
<div class="layui-btn-group">
<button type="button" class="layui-btn">增加</button>
<button type="button" class="layui-btn ">编辑</button>
<button type="button" class="layui-btn">删除</button>
</div>
</fieldset>
</body>
<script>
// 给layui的button按钮，添加事件
layui.use("jquery",function(){//使用layui提供的jquery模块
var $=layui.jquery; //需要先声明，才能使用layui提供的jquery---------这个jquery是在layui.js文件中，存放的【可以理解为，它也是layui的一个js插件】
//这里就跟jquery一样了
$(".layui-btn").click(function(){
alert($(this).html());//获取当前用户，所点击的内容
})
})
</script>
</html>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CJmyyKmb-1663310345438)(图片/image-20210801103445480.png)]](https://i-blog.csdnimg.cn/blog_migrate/07012e8a9d45c0be5e2bb2231ba34fea.png)
4、导航菜单
分2种：
水平菜单
给ul，添加layui-nav 实现
垂直菜单
给ul,添加layui-nav layui-nav-tree
其他样式:
- layui-nav-item 代表这是导航菜单中的一项
- layui-nav-child ：表示它是菜单项的子菜单【二级菜单----多级菜单，也用这个】
- layui-this 当前选中的菜单项
案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 1、把layui的css样式引入进来 -->
<link rel="stylesheet" href="layui/css/layui.css">
<!-- 2、把layui所需的js引入进来 -->
<script src="layui/layui.js"></script>
<title>layui 导航菜单的使用</title>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>水平导航菜单</legend>
</fieldset>
<ul class="layui-nav">
<li class="layui-nav-item layui-this"><a href="">选中</a></li>
<li class="layui-nav-item">
<a href="javascript:;">常规</a>
</li>
<li class="layui-nav-item"><a href="">导航</a></li>
<li class="layui-nav-item">
<a href="javascript:;">子级</a>
<dl class="layui-nav-child">
<dd><a href="">菜单1</a></dd>
<dd><a href="">菜单2</a></dd>
<dd><a href="">菜单3</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">选项</a>
<dl class="layui-nav-child">
<dd><a href="">选项1</a></dd>
<dd class="layui-this"><a href="">选项2</a></dd>
<dd><a href="">选项3</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">演示</a></li>
<!-- 这是个 带图片的菜单项 -->
<li class="layui-nav-item" lay-unselect="" style="float: right;">
<a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img"></a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">子级菜单</a></dd>
<dd><a href="javascript:;">横线隔断</a></dd>
<hr>
<dd style="text-align: center;"><a href="">退出</a></dd>
</dl>
</li>
</ul>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>垂直导航菜单</legend>
</fieldset>
<ul class="layui-nav layui-nav-tree">
<li class="layui-nav-item layui-this"><a href="">选中</a></li>
<li class="layui-nav-item">
<a href="javascript:;">常规</a>
</li>
<li class="layui-nav-item"><a href="">导航</a></li>
<li class="layui-nav-item">
<a href="javascript:;">子级</a>
<dl class="layui-nav-child">
<dd><a href="">菜单1</a></dd>
<dd class="layui-this"><a href="">菜单2</a></dd>
<dd><a href="">菜单3</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">选项</a>
<dl class="layui-nav-child">
<dd><a href="">选项1</a></dd>
<dd class="layui-this"><a href="">选项2</a></dd>
<dd><a href="">选项3</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">演示</a></li>
</ul>
</body>
<script>
layui.use('element', function(){
//使用layui的导航菜单组件，需要引用element js插件--------------这样导航菜单的js效果，才能正常显示
layui.use(['element'],function(){
})
});
</script>
</html>
效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pTgPdB9P-1663310345439)(图片/image-20210801103418404.png)]](https://i-blog.csdnimg.cn/blog_migrate/77f361d329232fb59f1ae056888f707f.png)
5、选项卡
1、选项卡风格说明：
- 默认风格
- 给div，添加 layui-tab
- 简洁风格
- 给div，添加 layui-tab layui-tab-brief
- 卡片风格
- 给div，添加 layui-tab layui-tab-card
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zFoijD3g-1663310345439)(图片/image-20210801114252024.png)]](https://i-blog.csdnimg.cn/blog_migrate/c7d6725ffe70e5070f492f978356748c.png)
2、相关样式：
- layui-tab ：代表它是一个layui的选项卡组件
- layui-tab-title：代表layui 选项卡的标题 ----------选项卡项的名称
- layui-this：表示选中某一项 选项卡
- layui-tab-content：代表选项卡中的内容
- layui-tab-item 表示具体的卡片内容
- layui-show ：默认是否显示该项的内容【如果不加，默认内容不会显示】------------它与layui-this配套使用
- layui-tab-title：代表layui 选项卡的标题 ----------选项卡项的名称
3、相关属性：
- lay-allowclose=“true” ：给选项卡项 添加一个关闭按钮，用户只需点击该按钮，该选项卡就会自动关闭掉
- lay-filter=“demo” 用于往layui的tab选项卡中，动态的增、删 选项卡 时，用到该属性
案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 1、把layui的css样式引入进来 -->
<link rel="stylesheet" href="layui/css/layui.css">
<!-- 2、把layui所需的js引入进来 -->
<script src="layui/layui.js"></script>
<title>layui 选项卡的使用</title>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>默认风格的Tab</legend>
</fieldset>
<div class="layui-tab">
<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: 50px;">
<legend>简洁风格的Tab</legend>
</fieldset>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this mydemo" lay-id="1">网站设置</li>
<li lay-id="2" class="mydemo">用户管理</li>
<li lay-id="3" class="mydemo">权限分配</li>
<li lay-id="4" class="mydemo">商品管理</li>
<li lay-id="5" class="mydemo">订单管理</li>
</ul>
<div class="layui-tab-content" style="height: 100px;">
<div class="layui-tab-item layui-show">内容不一样是要有，因为你可以监听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>
<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">删除所有</button>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>卡片风格的Tab</legend>
</fieldset>
<div class="layui-tab layui-tab-card" lay-allowclose="true">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content" style="height: 100px;">
<div class="layui-tab-item ">默认宽度是相对于父元素100%适应的，你也可以固定宽度。</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 class="layui-tab-item">6</div>
</div>
</div>
</body>
<script>
//如果要显示 layui选项卡,需要引入element组件
layui.use(['element','jquery'], function(){
//使用layui的导航菜单组件，需要引用element js插件--------------这样导航菜单的js效果，才能正常显示
layui.use(['element'],function(){
//1、声明我们要使用的组件
var $=layui.jquery;
var element=layui.element;
//动态添加选项卡
$("#add").click(function(){
//注意：docDemoTabBrief 这里要与，要操作的，选项卡组件的lay-filter 属性值，对应
element.tabAdd('docDemoTabBrief', {
title: '选项卡的标题'
,content: '选项卡的内容' //支持传入html
});
})
//切换到指定选项卡
$("#change").click(function(){
element.tabChange('docDemoTabBrief', '2'); //切换到 lay-id="2" 的这一项
})
//删除指定选项卡
$("#delete").click(function(){
element.tabDelete('docDemoTabBrief', '3'); //删除 lay-id="3" 的这一项
})
$("#deleteAll").click(function(){
var lis= $(".mydemo") //1、先获取到所有要删除的 选项卡项---这里，给所有要删除的选项，添加了class 属性
//2、通过遍历，进行删除
$.each(lis,function(index,item){ //index为索引 item为临时变量
var layid=item.getAttribute("lay-id")
element.tabDelete("docDemoTabBrief",layid)
})
})
})
});
</script>
</html>
效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V71A6orN-1663310345440)(图片/image-20210801132331484.png)]](https://i-blog.csdnimg.cn/blog_migrate/e7ba457981a1a363f8acae29a2ceda24.png)
6、进度条
相关样式：
- layui-progress：代表一个进度条
- layui-progress-bar：代表进度条里面的进度
- 给进度条设置颜色
- layui-bg-red 红色
- layui-bg-orange 橘色
- layui-bg-green 绿色
- layui-bg-blue 蓝色
- layui-bg-cyan 黑色 //如果想设置其他颜色，自己设定
- 给进度条，设置宽度
- layui-progress-big
相关属性：
- lay-percent：代表进度条的值 【通过设置该值的大小，来显示进度】
- lay-showpercent=“true” 在进度条上，显示具体的比例值
案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 1、把layui的css样式引入进来 -->
<link rel="stylesheet" href="layui/css/layui.css">
<!-- 2、把layui所需的js引入进来 -->
<script src="layui/layui.js"></script>
<title>layui 进度条的使用</title>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>默认风格的进度条</legend>
</fieldset>
<!-- 进度条1 -->
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="80%"></div>
</div>
<!-- 进度条2 -->
<div style="margin-top: 15px; width:300px">
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="70%"></div>
</div>
</div>
<br>
温馨提示：进度条的宽度是 100% 适配于它的父级元素，如上面的进度条是在一个 300px 的父容器中。
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>更多颜色选取</legend>
</fieldset>
<div class="layui-progress layui-progress-big " lay-showpercent="true">
<div class="layui-progress-bar layui-bg-red " lay-percent="20%"></div>
</div>
<br>
<div class="layui-progress" >
<div class="layui-progress-bar layui-bg-orange" lay-percent="30%" ></div>
</div>
<br>
</body>
<script>
</script>
</html>
效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-egOHCbGn-1663310345440)(图片/image-20210801134304718.png)]](https://i-blog.csdnimg.cn/blog_migrate/66fc4a3f7319c4ade8f59c4839249263.png)
7、面板+栅格布局
7.1、面板
常用的面板：
-
卡片面板
- layui-row 表示一行--------------------在layui中，把一行分成了12份儿
- layui-col-md6 ：用于layui的栅格布局
- layui-card ：表示一个卡片
- layui-card-header 表示卡片的标题
- layui-card-body 存放卡片的内容
- layui-card ：表示一个卡片
- layui-col-md6 ：用于layui的栅格布局
- layui-col-space15 设置 多个卡片之间的间距 数字的范围0~30
例子： <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>卡片面板</legend> </fieldset> <div class="layui-bg-gray" style="padding: 30px;"> <div class="layui-row layui-col-space15"> <div class="layui-col-md6"> <div class="layui-card"> <div class="layui-card-header">卡片面板</div> <div class="layui-card-body"> 卡片式面板面板通常用于非白色背景色的主体内<br> 从而映衬出边框投影 </div> </div> </div> <div class="layui-col-md6"> <div class="layui-card"> <div class="layui-card-header">卡片面板</div> <div class="layui-card-body"> 结合 layui 的栅格系统<br> 轻松实现响应式布局 </div> </div> </div> </div> </div> - layui-row 表示一行--------------------在layui中，把一行分成了12份儿
-
折叠面板
-
layui-collapse 表示是一个折叠面板
- layui-colla-item 表示这是一个折叠项 显示效果：每个折叠项有 个 > 按钮
- layui-colla-title 折叠项的标题
- layui-colla-content 折叠项的内容 layui-show 添加了它，表示它是默认展开
- layui-colla-item 表示这是一个折叠项 显示效果：每个折叠项有 个 > 按钮
-
相关事件：
// 注意：collapse(test) 与lay-filter="test" 对应 element.on('collapse(test)', function(data){ //2、当用户点击折叠面板中的任意一项，就会触发该方法 console.log(data.show); //得到当前面板的展开状态，true或者false 展开为true，关闭为false console.log(data.title); //得到当前点击面板的标题区域DOM对象 console.log(data.content); //得到当前点击面板的内容区域DOM对象 });
-
-
手风琴面板
- 效果：同一时间内，只能展开一个
- 与折叠面板相比，它只多了一个 样式
- lay-accordion=“”
案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 1、把layui的css样式引入进来 -->
<link rel="stylesheet" href="layui/css/layui.css">
<!-- 2、把layui所需的js引入进来 -->
<script src="layui/layui.js"></script>
<title>layui 面板的使用</title>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>卡片面板</legend>
</fieldset>
<div class="layui-bg-gray" style="padding: 30px;">
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">卡片面板</div>
<div class="layui-card-body">
卡片式面板面板通常用于非白色背景色的主体内<br>
从而映衬出边框投影
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">卡片面板</div>
<div class="layui-card-body">
结合 layui 的栅格系统<br>
轻松实现响应式布局
</div>
</div>
</div>
</div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常规折叠面板</legend>
</fieldset>
<!-- 加了 lay-accordion=""就是手风琴面板，不加就是普通的折叠面板 -->
<div class="layui-collapse lay-accordion=""" lay-filter="test">
<div class="layui-colla-item">
<h2 class="layui-colla-title">为什么JS社区大量采用未发布或者未广泛支持的语言特性？</h2>
<div class="layui-colla-content">
<p>有不少其他答案说是因为JS太差。我下面的答案已经说了，这不是根本性的原因。但除此之外，我还要纠正一些对JS具体问题的误解。JS当初是被作为脚本语言设计的，所以某些问题并不是JS设计得差或者是JS设计者的失误。比如var的作用域问题，并不是“错误”，而是当时绝大部分脚本语言都是这样的，如perl/php/sh等。模块的问题也是，脚本语言几乎都没有模块/命名空间功能。弱类型、for-in之类的问题也是，只不过现在用那些老的脚本语言的人比较少，所以很多人都误以为是JS才有的坑。另外有人说JS是半残语言，满足不了开发需求，1999年就该死。半残这个嘛，就夸张了。JS虽然有很多问题，但是设计总体还是优秀的。——来自知乎@贺师俊</p>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">为什么前端工程师多不愿意用 Bootstrap 框架？</h2>
<div class="layui-colla-content">
<p>因为不适合。如果希望开发长期的项目或者制作产品类网站，那么就需要实现特定的设计，为了在维护项目中可以方便地按设计师要求快速修改样式，肯定会逐步编写出各种业务组件、工具类，相当于为项目自行开发一套框架。——来自知乎@Kayo</p>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">layui 更适合哪些开发者？</h2>
<div class="layui-colla-content">
<p>在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类 AMD 组织形式，并非是有意与时代背道而驰。layui 认为以 jQuery 为核心的开发方式还没有到完全消亡的时候，而早期市面上基于 jQuery 的 UI 都普通做得差强人意，所以需要有一个新的UI去重新为这一领域注入活力，并采用一些更科学的架构方式。
<br><br>
因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。</p>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">一个折叠面板标题？</h2>
<div class="layui-colla-content">
<p>一个折叠面板的内容。。。</p>
</div>
</div>
</div>
</body>
<script>
//如果要显示 layui选项卡,需要引入element组件
layui.use(['element','jquery'], function(){
//使用layui的导航菜单组件，需要引用element js插件--------------这样导航菜单的js效果，才能正常显示
layui.use(['element'],function(){
//1、声明我们要使用的组件
var $=layui.jquery;
var element=layui.element;
// 注意：collapse(test) 与lay-filter="test" 对应
element.on('collapse(test)', function(data){ //2、当用户点击折叠面板中的任意一项，就会触发该方法
console.log(data.show); //得到当前面板的展开状态，true或者false 展开为true，关闭为false
console.log(data.title); //得到当前点击面板的标题区域DOM对象
console.log(data.content); //得到当前点击面板的内容区域DOM对象
});
})
})
</script>
</html>
效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GG9ZvSrZ-1663310345441)(图片/image-20210801170624996.png)]](https://i-blog.csdnimg.cn/blog_migrate/e74a435dfeb526d9d779a251c05a86fc.png)
7.2 layui的布局
- layui-row ：表示一行，一行有12个格子
- layui-col-xs6 表示移动端设备
- layui-col-sm6 表示平板设备
- layui-col-md6 表示桌面设备
案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 1、把layui的css样式引入进来 -->
<link rel="stylesheet" href="layui/css/layui.css">
<!-- 2、把layui所需的js引入进来 -->
<script src="layui/layui.js"></script>
<title>layui 面板的使用</title>
<style>
.grid-demo{
height: 100px;
background-color:red;
}
.grid-demo-bg1{
height: 100px;
background-color:yellow;
}
</style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>始终等比例水平排列</legend>
</fieldset>
<!-- 第一行 -->
<div class="layui-row">
<div class="layui-col-xs6">
<div class="grid-demo grid-demo-bg1">6/12</div>
</div>
<div class="layui-col-xs6">
<div class="grid-demo">6/12</div>
</div>
</div>
<!-- 第二行 -->
<div class="layui-row">
<div class="layui-col-xs3">
<div class="grid-demo grid-demo-bg1">3/12</div>
</div>
<div class="layui-col-xs3">
<div class="grid-demo">3/12</div>
</div>
<div class="layui-col-xs3">
<div class="grid-demo grid-demo-bg1">3/12</div>
</div>
<div class="layui-col-xs3">
<div class="grid-demo">3/12</div>
</div>
</div>
</body>
<script>
</script>
</html>
效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uZkctYqo-1663310345441)(图片/image-20210801175913386.png)]](https://i-blog.csdnimg.cn/blog_migrate/7ad73e00d3f042ff7692ca578f363991.png)
8、徽章
用途：做消息提示时，那个显示的小图标，可以用它来做
- 小圆点的样式
- layui-badge-dot
- 徽章的样式：
- layui-badge
- 边框徽章的样式：
- layui-badge-rim
案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 1、把layui的css样式引入进来 -->
<link rel="stylesheet" href="layui/css/layui.css">
<!-- 2、把layui所需的js引入进来 -->
<script src="layui/layui.js"></script>
<title>layui 面板的使用</title>
<style>
.grid-demo{
height: 100px;
background-color:red;
}
.grid-demo-bg1{
height: 100px;
background-color:yellow;
}
</style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>小徽章、大家族</legend>
</fieldset>
小圆点：
<!-- 默认颜色为：橙色 -->
<span class="layui-badge-dot"></span>
<span class="layui-badge-dot layui-bg-orange"></span>
<span class="layui-badge-dot layui-bg-green"></span>
<span class="layui-badge-dot layui-bg-cyan"></span>
<span class="layui-badge-dot layui-bg-blue"></span>
<span class="layui-badge-dot layui-bg-black"></span>
<span class="layui-badge-dot layui-bg-gray"></span>
<br><br>常规弧形徽章：
<span class="layui-badge">6</span>
<span class="layui-badge">99</span>
<span class="layui-badge">61728</span>
<span class="layui-badge">赤</span>
<span class="layui-badge layui-bg-orange">橙</span>
<span class="layui-badge layui-bg-green">绿</span>
<span class="layui-badge layui-bg-cyan">青</span>
<span class="layui-badge layui-bg-blue">蓝</span>
<span class="layui-badge layui-bg-black">黑</span>
<span class="layui-badge layui-bg-gray">灰</span>
<br><br>边框徽章：
<span class="layui-badge-rim">6</span>
<span class="layui-badge-rim">Hot</span>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>与其它元素的搭配</legend>
</fieldset>
<button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>
<button class="layui-btn">动态<span class="layui-badge-dot layui-bg-orange"></span></button>
</body>
<script>
</script>
</html>
效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lgo3Rw5r-1663310345442)(图片/image-20210801180856216.png)]](https://i-blog.csdnimg.cn/blog_migrate/c87f764ca65a4f2c8d36b29b796b0e04.png)
9、时间线
常规时间线
相关的样式：
layui-timeline：代表一个时间线
layui-timeline-item 代表一个时间节点
<i class="layui-icon layui-timeline-axis"></i> //表示图标和竖线图标 layui-timeline-axis竖线图标layui-timeline-content ：表示时间线的内容
- layui-text：内容可以放文本
- layui-timeline-title：代表标题
简单时间线：
与常规时间线相比，就是没有区分本标题和内容
- 没有写
、
案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 1、把layui的css样式引入进来 -->
<link rel="stylesheet" href="layui/css/layui.css">
<!-- 2、把layui所需的js引入进来 -->
<script src="layui/layui.js"></script>
<title>layui 时间线的使用</title>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常规时间线</legend>
</fieldset>
<ul class="layui-timeline">
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月18日</h3>
<p>
layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
<br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
<br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月16日</h3>
<p>杜甫的思想核心是儒家的仁政思想，他有<em>“致君尧舜上，再使风俗淳”</em>的宏伟抱负。个人最爱的名篇有：</p>
<ul>
<li>《登高》</li>
<li>《茅屋为秋风所破歌》</li>
</ul>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月15日</h3>
<p>
中国人民抗日战争胜利日
<br>铭记、感恩
<br>所有为中华民族浴血奋战的英雄将士
<br>永垂不朽
</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">过去</div>
</div>
</li>
</ul>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>简约时间线：大事记</legend>
</fieldset>
<ul class="layui-timeline">
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">2018年，layui 5.0 发布。并发展成为中国最受欢迎的前端UI框架（期望）</div>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">2017年，layui 里程碑版本 2.0 发布</div>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">2016年，layui 首个版本发布</div>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">2015年，layui 孵化</div>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">更久前，轮子时代。维护几个独立组件：layer等</div>
</div>
</li>
</ul>
</body>
<script>
</script>
</html>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XZ5TmHDk-1663310345442)(图片/image-20210801191254936.png)]](https://i-blog.csdnimg.cn/blog_migrate/064bb9d0f99ca1f83a963c199650df5e.png)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OoTbyyM8-1663310345443)(图片/image-20210801191307634.png)]](https://i-blog.csdnimg.cn/blog_migrate/aabfc8b1dfdc344993172b074ae682b0.png)
10、轮播
注意事项：所有的代码，都在js中，进行 -----------------------详细配置，请看文档
案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 1、把layui的css样式引入进来 -->
<link rel="stylesheet" href="layui/css/layui.css">
<!-- 2、把layui所需的js引入进来 -->
<script src="layui/layui.js"></script>
<title>layui 轮播的使用</title>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>填充轮播元素 - 以图片为例</legend>
</fieldset>
<div class="layui-carousel" id="test10">
<div carousel-item="">
<div><img src="image/0192b09ad8b9cadf4d5bb629aeed7a24.jpg"></div>
<div><img src="image/114009281f8d1f2f85e779ca30c7ecb3.jpg"></div>
<div><img src="image/2ee498fd1f432a88c185ee73779cea2f.jpeg"></div>
<div><img src="image/3343a3a476ea6dc99db4492417e84e2b.jpg"></div>
<div><img src="image/76aa8e45ab51ff291ca5ed2348f0b0c0.jpg"></div>
<div><img src="image/9cb4a7672cb4d55e547833df12a47d15.jpg"></div>
<div><img src="image/cc7aee9456a12bc44bd13afe4b9742ba.jpg"></div>
</div>
</div>
</body>
<script>
//carousel 引入轮播模块
layui.use(['carousel', 'jquery'], function(){
var $=layui.jquery
var carousel = layui.carousel //引入轮播模块
//图片轮播
carousel.render({
elem: '#test10' //要与id="test10" 对应
,width: '778px' //轮播的长度-----就是那个框子
,height: '440px' //轮播的高度-----就是那个框子
,interval: 1000 //轮播的速度
});
})
</script>
</html>
效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vjin7miG-1663310345443)(图片/image-20210801200752875.png)]](https://i-blog.csdnimg.cn/blog_migrate/e3e3e531ffd5b4118c539ec07fddc094.png)
11、时间和日期选择器【公司用的还是easyUI的】
-
直接从官网上copy代码
常用的属性：
-
elem：绑定，要渲染日期选择器，input标签的id
-
type:指定显示不同的日期选择器 默认是date【可选年、月、日】
- datetime:日期时间选择器【可选择：年月日时分秒】
- year: 只能选择年
- month：只能选择年、月
- time:只能选择时间
-
range:开启范围选择 如果值为true，就是开启范围选择；如果为字符串，就是指定范围选择中2个时间点之间的分隔符
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nbP9Cryr-1663310345443)(图片/image-20210807104857518.png)]](https://i-blog.csdnimg.cn/blog_migrate/c4b6956c38cef702ca953ae5150fb174.png)
-
format:指定显示的日期格式---------------格式化，前端页面，要显示的时间格式
- yyyy年MM月dd日 HH时mm分ss秒
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VQBTcEm9-1663310345443)(图片/image-20210807105248119.png)]](https://i-blog.csdnimg.cn/blog_migrate/525478b65c3d178f6dd40f696ed27cba.png)
-
value：显示默认时间【不写，默认为空】
- new Date() 显示当前的系统时间
-
min 和max属性：设置，用户可以选择日期的范围，超过这个范围，就不能选择了
特殊操作:用户只能选择，某个时间点的前后7天 min:-7, max:7![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EkzhxNlI-1663310345444)(图片/image-20210807123241765.png)]](https://i-blog.csdnimg.cn/blog_migrate/5c805aea3b75c9a6189bdd9b90458e21.png)
特殊操作：只能选择一天内的早6点到晚6点 laydate.render({ elem: '#test3', //指定元素---------给指定元素上，进行绑定layui的日期选择器 type:"time", min: '06:00:00' ,max: '18:00:00' });-
show:是否页面一加载，就弹出日期选择器----------默认为false
-
showBottom ：是否显示底部按钮 ，默认为true
-
btns：自定义，在弹出的日期选择器中，底部 要显示哪些按钮
-
案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 1、把layui的css样式引入进来 -->
<link rel="stylesheet" href="layui/css/layui.css">
<!-- 2、把layui所需的js引入进来 -->
<script src="layui/layui.js"></script>
<title>layui 时间和日期选择器的使用</title>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常规用法</legend>
</fieldset>
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">中文版</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">国际版</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test2" placeholder="yyyy-MM-dd">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">test3</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test3" placeholder="yyyy-MM-dd">
</div>
</div>
</div>
</div>
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">test4</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test4" placeholder="yyyy-MM-dd">
</div>
</div>
</div>
</div>
</body>
<script>
// 使用时间选择器，选要引入laydate组件
layui.use(['jquery','laydate'],function(){
var $=layui.jquery;
var element=layui.element;
var laydate=layui.laydate;
//执行一个laydate实例----------用于，用户点击那个日期选择器，它就会自动弹出日期列表【不写，不会弹的】
laydate.render({
elem: '#test1', //指定元素---------给指定元素上，进行绑定layui的日期选择器
type:"datetime",
range:"~~~",
format:'yyyy年MM月dd日 HH时mm分ss秒'
});
laydate.render({
elem: '#test2', //指定元素---------给指定元素上，进行绑定layui的日期选择器
type:"datetime",
format:'yyyy年MM月dd日 HH时mm分ss秒'
});
laydate.render({
elem: '#test3', //指定元素---------给指定元素上，进行绑定layui的日期选择器
type:"time",
// value:'2021-08-07 00:00:00', //默认显示指定的时间
// value:new Date(), //默认显示当前的系统时间
// min:'2017-12-31',
// max:'2019-12-31',
// min:-7,
// max:7
min: '09:30:00'
,max: '17:30:00'
,showBottom: false //是否显示底部按钮，默认为true
,btns: ['clear', 'confirm'] //设置底部按钮，要显示哪几个，默认显示3个
});
laydate.render({
elem: '#test4', //指定元素---------给指定元素上，进行绑定layui的日期选择器
type:"datetime"
// ,lang: 'cn' //指定，要显示哪种语言版本，默认是cn中文版本，en是英文版本
//,theme: 'grid' //theme的可选值有：default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题）
//,calendar: true //是否显示公历【就显示节日名称】 默认为false，不显示
,mark: { //自定义重要的节日
'0-0-15': '发工资' //表示每月的15号，都是发工资日
}
});
})
</script>
</html>
效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nr1fOBWb-1663310345444)(图片/image-20210807155835918.png)]](https://i-blog.csdnimg.cn/blog_migrate/0ae393ec98d4732ee6552d6975aae2c6.png)
12、form表单
12.1表单元素
-
输入框
-
密码框
-
下拉列表【layui没有使用我们写的直接渲染， 而是又渲染了一次--------因此form表的，必须添加 class=“layui-form”，否则layui无法正确渲染】
-
单选框【layui没有使用我们写的直接渲染， 而是又渲染了一次--------因此form表的，必须添加 class=“layui-form”，否则layui无法正确渲染】
-
复选框【layui没有使用我们写的直接渲染， 而是又渲染了一次--------因此form表的，必须添加 class=“layui-form”，否则layui无法正确渲染】
-
开关【layui没有使用我们写的直接渲染， 而是又渲染了一次--------因此form表的，必须添加 class=“layui-form”，否则layui无法正确渲染】
- 使用checkbox实现
-
文本域
案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 1、把layui的css样式引入进来 -->
<link rel="stylesheet" href="layui/css/layui.css">
<!-- 2、把layui所需的js引入进来 -->
<script src="layui/layui.js"></script>
<title>layui form表单的使用</title>
</head>
<body>
<!-- 注意：要使用layui提供的form表单，必须写这个样式class="layui-form" 否则，layui的form表单提供的样式，都不生效 -->
<form class="layui-form" action="">
<!-- 一行显示一个输入框【原生的就是这种情况】 区别：它用的是layui-input-block-->
<div class="layui-form-item">
<label class="layui-form-label">用户名：</label>
<div class="layui-input-block">
<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入用户名：" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户密码：</label>
<div class="layui-input-block">
<input type="password" name="title" lay-verify="title" autocomplete="off" placeholder="请输入用户密码：" class="layui-input">
</div>
</div>
<!-- 一行显示多个输入框 区别：它用的是layui-input-inline-->
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">验证手机</label>
<div class="layui-input-inline">
<!-- lay-verify="required|phone" 表示使用验证机制，这是是非空验证、手机号验证 -->
<input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">验证邮箱</label>
<div class="layui-input-inline">
<!-- lay-verify="email"这里是邮箱验证 -->
<input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<!-- 下拉选择框 -->
<div class="layui-form-item">
<label class="layui-form-label">单行选择框</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1" selected="">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
<!-- 下拉选择框 想将这个下拉选择框，在一行内显示多个 -->
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">单行选择框</label>
<div class="layui-input-inline">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1" selected="">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
</div>
<!-- 单选按钮 -->
<div class="layui-form-item">
<label class="layui-form-label">性别：</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男" checked="">
<input type="radio" name="sex" value="女" title="女">
<input type="radio" name="sex" value="禁" title="禁用" disabled="">
</div>
</div>
<!-- 复选框 layui提供2种效果 效果1-->
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作">
<input type="checkbox" name="like[read]" title="阅读" checked="">
<input type="checkbox" name="like[game]" title="游戏">
</div>
</div>
<!-- 复选框 layui提供2种效果 效果2 -->
<div class="layui-form-item" pane="">
<label class="layui-form-label">原始复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
<input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
<input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled="">
</div>
</div>
<!-- 开关组件 -->
<div class="layui-form-item">
<label class="layui-form-label">开关-默认开</label>
<div class="layui-input-block">
<!--lay-text="开|关" 指定，开关按钮中，显示的文本 -->
<input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="开|关">
</div>
</div>
<!-- 普通文本域 -->
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">普通文本域</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
</form>
</body>
<script>
//使用form表的，必须引入form模块，否则layui提供的页面效果无法正常显示出来
layui.use('element','jquery','form', function(){
var $=layui.jquery;
var element=layui.element
var form=layui.form
});
</script>
</html>
效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UqVdI2vZ-1663310345445)(图片/image-20210807174742711.png)]](https://i-blog.csdnimg.cn/blog_migrate/9eb9d191420c4148d92d423e3df20067.png)
12.2 form对象：表单对象
-
在原有的表单的基础上，只需给表单，添加这个样式，就可实现这种效果
-
<form class="layui-form layui-form-pane" action="">[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RRUAxE5r-1663310345445)(图片/image-20210807200446382.png)]
-
1、form表单的事件【核心：表单提交事件】
-
监听表单提交事件：
- 监听的位置：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FDJNLciU-1663310345446)(图片/image-20210808103831571.png)]](https://i-blog.csdnimg.cn/blog_migrate/185bd65041d75e7b9ba08b784501625f.png)
- 监听的代码：
//监听form表单，提交按钮的提交事件 form.on('submit(demo1)', function(data){ console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象 console.log(data.form) //被执行提交的form对象 console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}----获取用户输入的数据 //----使用ajax，发送异步请求------ //$.post() return false; //阻止表单跳转【false表示不使用同步提交】。如果要使用同步提交，去掉这段即可。[return true;为同步提交，会发生页面刷新的效果 如果想使用异步提交，需要自己写ajax来发送请求] }); -
监听下拉框的改变事件
-
监听的位置：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2kmZ3Tn5-1663310345446)(图片/image-20210808110122609.png)]](https://i-blog.csdnimg.cn/blog_migrate/0e429a5ee09c14f8c9541989f26bc94e.png)
-
监听的代码：
//监听下拉框的选择事件 form.on('select(jiguan)', function(data){ console.log(data.elem); //得到select原始DOM对象 console.log(data.value); //得到被选中的值--------获取用户选择的数据 console.log(data.othis); //得到美化后的DOM对象【程序渲染后的DOM对象】 }); -
效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A5AJAWxe-1663310345446)(图片/image-20210808110357286.png)]](https://i-blog.csdnimg.cn/blog_migrate/e2e80660e5eda17b9daf2016332e68d5.png)
-
-
监听复选框的改变事件
-
监听的位置：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nfu7mT5n-1663310345447)(图片/image-20210808111210933.png)]
-
监听的代码：
//监听复选框的改变事件【勾选和取消勾选，都会触发】 form.on('checkbox(hobby)', function(data){ console.log(data.elem); //得到checkbox原始DOM对象 console.log(data.elem.checked); //是否被选中，true或者false console.log(data.value); //复选框value值，也可以通过data.elem.value得到 console.log(data.othis); //得到美化后的DOM对象 });
-
-
监听开关的事件
-
监听的位置：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2ZVLbbfF-1663310345447)(图片/image-20210808113218483.png)]
-
监听的代码：
//监听开关的改变事件 form.on('switch(ishere)', function(data){ console.log(data.elem); //得到checkbox原始DOM对象 console.log(data.elem.checked); //开关是否开启，true或者false console.log(data.value); //开关value值，也可以通过data.elem.value得到 console.log(data.othis); //得到美化后的DOM对象 });
-
-
监听单选按钮的事件
-
监听的位置：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H5Yj6bUS-1663310345447)(图片/image-20210808121632725.png)]
-
监听的代码：
//监听radio的改变事件 form.on('radio(sex)', function(data){ console.log(data.elem); //得到radio原始DOM对象 console.log(data.value); //被点击的radio的value值 });
-
2、form表单的元素渲染【针对：下拉选择框、复选框、单选按钮 来使用】
-
语句：form.render(“select”);//如果啥都不传，默认渲染所有
-
看文档
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F6tbfqfL-1663310345447)(图片/image-20210808124412685.png)]
-
看12.2.1 案例
代码：
<!-- 12.2.1 id='div_jiguan'-->
<select name="jiguan" lay-filter="jiguan" id='div_jiguan'>
<option value=""></option>
<option value="武汉">武汉</option>
<option value="上海" selected="">上海</option>
<option value="北京">北京</option>
</select>
<!-- 12.2.1 -->
<button type="button" class="layui-btn " id="btn1">向籍贯中，添加一个深圳</button>
-------------------------------------------------------------
//12.2.1 点击按钮，给下拉选择框中添加 深圳选项
$("#btn1").click(function(){
//得到下拉选择框
var jg=$("#div_jiguan")
jg.append("<option value=深圳>深圳</option>")
alert(jg.html()) //打印一下，现在的DOM结构【页面内容】
//让layui重新渲染 下拉框-------因为下拉选择框，layui不是直接使用我们写的，而是根据我们写的，它有自己重新渲染了一份儿它的
form.render("select");//如果啥都不传，默认渲染所有
})
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0Cv0sz9z-1663310345448)(图片/image-20210808124640632.png)]
3、初始化表单【可用于：数据的回显】
注意事项：
- 它这里的复选框有个bug，无法通过layui提供的api，进行默认选中多个
- 解决思路：我只需要获取到每一个选项框，然后通过遍历后端传递过来的数据，对要选择的添加checked属性，然后执行layui提供的重新渲染api，从而实现效果
//12.2.2：初始化表单
$("#btn2").click(function () {
form.val("myform", { //myform 即 from标签，它的属性 lay-filter="myform"的值
"username": "池佳文" // "name": "value"
,"pwd": 3
,"phone": '17331619147'
,"email": '2289149672@qq.com'
,"jiguan": '北京'
,"sex": "女"
//,"hobby": ['写作','阅读'] //复选框的数据，是一个数组----------这里有个bug,无法实现，需要用原生js写法，来实现
,ishere:false
});
//houduan是用来模拟，后端传递过来的数据
var houduan="写作,阅读"
var hobbys=houduan.split(",")
var hobbyElements=$("[name='hobby']");//获取到要操作的，所有复选框
$.each(hobbys,function (i,str) { //遍历
alert(str)
$.each(hobbyElements,function (j,item) { //遍历-------现有的dom树【复选框】
var jdom=$(item) //把dom---转成jquery能识别的对象
if(jdom.val()==str){ //如果后端返回的数据，与当前页面中的下拉选择框文本内容相同，就给他选中
jdom.attr("checked","checked")
}
})
})
form.render();//重新渲染
})
4、表单验证【给元素，添加验证规则】
-
只需要在表单元素上加上 lay-verify=“” 属性值即可----------实现，验证该表单元素
-
官方提供的，校验规则：
-
required（必填项）：非空验证
phone（手机号）
email（邮箱）
url（网址）：必须要有http:// 开头，验证才会通过
number（数字）
date（日期）
identity（身份证） -
自定义校验规则：
使用方式：核心代码lay-verify="pwd <input type="password" name="pwd" lay-verify="pwd" autocomplete="off" placeholder="请输入用户密码：" class="layui-input" > --------------------------------------------------------------------------------------------- //扩展自定义规则 form.verify({ pwd: [ /^[\S]{6,12}$/ ,'密码必须6到12位，且不能出现空格' //参数1：校验规则 参数2：校验不通过的提示信息 ] })
-
-
案例演示【12.2中所有例子，都在这里】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 1、把layui的css样式引入进来 -->
<link rel="stylesheet" href="layui/css/layui.css">
<!-- 2、把layui所需的js引入进来 -->
<script src="layui/layui.js"></script>
<title>layui form对象的使用</title>
</head>
<body>
<!-- 注意：要使用layui提供的form表单，必须写这个样式class="layui-form" 否则，layui的form表单提供的样式，都不生效 -->
<form class="layui-form layui-form-pane" action="" lay-filter="myform">
<!-- 一行显示一个输入框【原生的就是这种情况】 区别：它用的是layui-input-block-->
<div class="layui-form-item">
<label class="layui-form-label">用户名：</label>
<div class="layui-input-block">
<!-- name属性，提交表单的时候，它就会作为key，进行前后端数据的传递 -->
<input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入用户名：" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户密码：</label>
<div class="layui-input-block">
<input type="password" name="pwd" lay-verify="pwd" autocomplete="off" placeholder="请输入用户密码：" class="layui-input" >
</div>
</div>
<!-- 一行显示多个输入框 区别：它用的是layui-input-inline-->
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">用户手机</label>
<div class="layui-input-inline">
<!-- lay-verify="required|phone" 表示使用验证机制，这是是非空验证、手机号验证 -->
<input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">用户邮箱</label>
<div class="layui-input-inline">
<!-- lay-verify="email"这里是邮箱验证 -->
<input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<!-- 下拉选择框 -->
<div class="layui-form-item">
<label class="layui-form-label">籍贯</label>
<div class="layui-input-block">
<!-- lay-filter="jiguan" 给下拉框绑定事件，layui的语法 -->
<!-- 12.2.1 id='div_jiguan'-->
<select name="jiguan" lay-filter="jiguan" id='div_jiguan'>
<option value=""></option>
<option value="武汉">武汉</option>
<option value="上海" selected="">上海</option>
<option value="北京">北京</option>
</select>
</div>
</div>
<!-- 单选按钮 -->
<div class="layui-form-item">
<label class="layui-form-label">性别：</label>
<div class="layui-input-block">
<input type="radio" name="sex" lay-filter="sex" value="男" title="男" checked="">
<input type="radio" name="sex" lay-filter="sex" value="女" title="女">
<input type="radio" name="sex" lay-filter="sex" value="禁" title="禁用" disabled="">
</div>
</div>
<!-- 复选框 layui提供2种效果 效果1-->
<div class="layui-form-item">
<label class="layui-form-label">爱好：</label>
<div class="layui-input-block">
<!-- value="写作" 用于给定，复选框的值，这个值会作为数据，向后端传递 -->
<input type="checkbox" lay-filter="hobby" value="写作" name="hobby" title="写作" >
<input type="checkbox" lay-filter="hobby" value="阅读" name="hobby" title="阅读" >
<input type="checkbox" lay-filter="hobby" value="游戏" name="hobby" title="游戏">
</div>
</div>
<!-- 开关组件 -->
<div class="layui-form-item">
<label class="layui-form-label">是否在职</label>
<div class="layui-input-block">
<!--lay-text="开|关" 指定，开关按钮中，显示的文本 lay-filter="ishere"给开关绑定事件 -->
<input type="checkbox" checked="checked" name="ishere" checked lay-skin="switch" lay-filter="ishere" lay-text="是|否">
</div>
</div>
<!-- 提交按钮 -->
<div class="layui-form-item">
<div class="layui-input-block">
<!-- lay-submit="" 给按钮，绑定校验规则【上面写的那些校验规则，需要给提交按钮，添加这个属性，它才会触发，否则，校验规则，没有效果】 -->
<!-- 用于给表单，绑定事件，所用到的 layui提供的一种写法 -->
<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
<!-- 12.2.1 -->
<button type="button" class="layui-btn " id="btn1">向籍贯中，添加一个深圳</button>
<!-- 12.2.2：初始化表单 -->
<button type="button" class="layui-btn " id="btn2">初始化表单</button>
</div>
</div>
</form>
</body>
<script>
//使用form表的，必须引入form模块，否则layui提供的页面效果无法正常显示出来
layui.use(['element','jquery','form'], function(){
var $=layui.jquery;
var element=layui.element
var form=layui.form
//监听form表单，提交按钮的提交事件
form.on('submit(demo1)', function(data){
console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
console.log(data.form) //被执行提交的form对象
console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}----获取用户输入的数据
//----使用ajax，发送异步请求------
//$.post()
return false; //阻止表单跳转【false表示不使用同步提交】。如果要使用同步提交，去掉这段即可。[return true;为同步提交，会发生页面刷新的效果 如果想使用异步提交，需要自己写ajax来发送请求]
});
//监听下拉框的选择事件
form.on('select(jiguan)', function(data){
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值--------获取用户选择的数据
console.log(data.othis); //得到美化后的DOM对象【程序渲染后的DOM对象】
});
//监听复选框的改变事件【勾选和取消勾选，都会触发】
form.on('checkbox(hobby)', function(data){
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //是否被选中，true或者false
console.log(data.value); //复选框value值，也可以通过data.elem.value得到
console.log(data.othis); //得到美化后的DOM对象
});
//监听开关的改变事件
form.on('switch(ishere)', function(data){
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //开关是否开启，true或者false
console.log(data.value); //开关value值，也可以通过data.elem.value得到
console.log(data.othis); //得到美化后的DOM对象
});
//监听radio的改变事件
form.on('radio(sex)', function(data){
console.log(data.elem); //得到radio原始DOM对象
console.log(data.value); //被点击的radio的value值
});
//12.2.1 点击按钮，给下拉选择框中添加 深圳选项
$("#btn1").click(function(){
//得到下拉选择框
var jg=$("#div_jiguan")
jg.append("<option value=深圳>深圳</option>")
alert(jg.html()) //打印一下，现在的DOM结构【页面内容】
//让layui重新渲染 下拉框-------因为下拉选择框，layui不是直接使用我们写的，而是根据我们写的，它有自己重新渲染了一份儿它的
form.render("select");//如果啥都不传，默认渲染所有
})
//12.2.2：初始化表单
$("#btn2").click(function () {
form.val("myform", { //myform 即 from标签，它的属性 lay-filter="myform"的值
"username": "池佳文" // "name": "value"
,"pwd": 3
,"phone": '17331619147'
,"email": '2289149672@qq.com'
,"jiguan": '北京'
,"sex": "女"
//,"hobby": ['写作','阅读'] //复选框的数据，是一个数组----------这里有个bug,无法实现，需要用原生js写法，来实现
,ishere:false
});
//houduan是用来模拟，后端传递过来的数据
var houduan="写作,阅读"
var hobbys=houduan.split(",")
var hobbyElements=$("[name='hobby']");//获取到要操作的，所有复选框
$.each(hobbys,function (i,str) { //遍历
alert(str)
$.each(hobbyElements,function (j,item) { //遍历-------现有的dom树【复选框】
var jdom=$(item) //把dom---转成jquery能识别的对象
if(jdom.val()==str){ //如果后端返回的数据，与当前页面中的下拉选择框文本内容相同，就给他选中
jdom.attr("checked","checked")
}
})
})
form.render();//重新渲染
})
//扩展自定义规则
form.verify({
pwd: [
/^[\S]{6,12}$/ ,'密码必须6到12位，且不能出现空格' //参数1：校验规则 参数2：校验不通过的提示信息
]
})
});
</script>
</html>
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UD3RxYHE-1663310345448)(图片/image-20210808145826776.png)]
13、弹出层
官网地址：https://layer.layui.com/
官网中：提供了好多，不同的提示效果，可选择你喜欢的
13.1 layer的基础知识
1、layer.alert 普通信息框
//演示alert的用法
$("#btn1").click(function() {
// layer.alert('只想简单的提示');
// layer.alert('加了个图标', {icon: 1}); //带图标的提示框 图标是从1~7
layer.alert('有了回调', function(index){ //只有用户点击了确定按钮，才会执行该回调函数
//do something
layer.close(index);//关闭弹出框，注意：所有的弹出框，都是通过弹出层的索引，来进行关闭的
});
})
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CPEhKO11-1663310345448)(图片/image-20210808160547003.png)]](https://i-blog.csdnimg.cn/blog_migrate/b4a0813eb7a1b5955f3becf6136fbfee.png)
2、layer.confirm 询问框
- 一般用于，删除数据的时候，弹出的确认框
//演示confirm的用法---一般用于 删除的时候，弹出该提示框
$("#btn2").click(function() {
layer.confirm('你确定要删除吗？', {icon: 3, title:'提示'}, function(index){
//只有用户点击了确定，才会执行该回调函数，点击取消不会执行
//do something
layer.close(index);
});
})
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pgyPed8s-1663310345449)(图片/image-20210808160531792.png)]](https://i-blog.csdnimg.cn/blog_migrate/fce4fbc898d2f1bf00dd40a45f9ae13e.png)
3、layer.prompt 提示框
- 注意：它一次性，只能输入一个值【很少用】
//演示prompt的用法---一般用于 删除的时候，弹出该提示框
$("#btn3").click(function() {
layer.prompt(function(value, index, elem){
alert(value); //得到value----获取到用户输入的值
layer.close(index);
});
})
4、layer.tab 选项卡层
5、layer.photos 相册层
//演示图片层
$("#btn5").click(function() {
$.getJSON('/image.json', function(json){
layer.photos({
photos: json
,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});
});
})
对应的json格式数据，后端返回的必须是这种格式，否则失败不了：
{
"title": "sf",
"id": 123,
"start": 0,
"data": [
{
"alt": "1.png",
"pid": 0,
"src": "image/2ee498fd1f432a88c185ee73779cea2f.jpeg",
"thumb": ""
}
]
}
6、layer.msg: 提示框
-
特点：提示后，过几秒会自动消失【默认是3秒关闭】
-
代码：
//演示提示框 $("#btn6").click(function() { //eg1 //layer.msg('只想弱弱提示'); //eg2 //layer.msg('有表情地提示', {icon: 6}); //eg3 // layer.msg('关闭后想做些什么', function(){ // //do something // }); //eg layer.msg('同上', { icon: 1, time: 2000 //2秒关闭（如果不配置，默认是3秒） }, function(){ //do something }); })
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YFKJNlgv-1663310345449)(图片/image-20210808163201755.png)]
7、layer.tips:吸附
- 很少用 用来给指定的标签，显示提示信息的
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wlet7fCC-1663310345449)(图片/image-20210808163654646.png)]](https://i-blog.csdnimg.cn/blog_migrate/67c283faffc27df92c86c7548ffb8fc2.png)
案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 1、把layui的css样式引入进来 -->
<link rel="stylesheet" href="layui/css/layui.css">
<!-- 2、把layui所需的js引入进来 -->
<script src="layui/layui.js"></script>
<title>layui form对象的使用</title>
</head>
<body>
<!-- 演示alert的用法 -->
<button type="button" class="layui-btn" id="btn1">alert</button>
<!-- 演示confirm的用法 -->
<button type="button" class="layui-btn" id="btn2">confirm</button>
<button type="button" class="layui-btn" id="btn3">prompt</button>
<button type="button" class="layui-btn" id="btn4">tab</button>
<button type="button" class="layui-btn" id="btn5">photos</button>
<button type="button" class="layui-btn" id="btn6">msg</button>
<button type="button" class="layui-btn" id="btn7">photos</button>
<button type="button" class="layui-btn" id="btn8">photos</button>
</body>
<script>
//使用form表的，必须引入form模块，否则layui提供的页面效果无法正常显示出来
layui.use(['element','jquery','layer'], function(){
var $=layui.jquery;
var element=layui.element
var layer=layui.layer
//演示alert的用法
$("#btn1").click(function() {
// layer.alert('只想简单的提示');
// layer.alert('加了个图标', {icon: 1}); //带图标的提示框 图标是从1~7
layer.alert('有了回调', function(index){ //只有用户点击了确定按钮，才会执行该回调函数
//do something
layer.close(index);//关闭弹出框，注意：所有的弹出框，都是通过弹出层的索引，来进行关闭的
});
})
//演示confirm的用法---一般用于 删除的时候，弹出该提示框
$("#btn2").click(function() {
layer.confirm('你确定要删除吗？', {icon: 3, title:'提示'}, function(index){
//只有用户点击了确定，才会执行该回调函数，点击取消不会执行
//do something
layer.close(index);
});
})
//演示prompt的用法
$("#btn3").click(function() {
layer.prompt(function(value, index, elem){
alert(value); //得到value----获取到用户输入的值
layer.close(index);
});
})
//演示tab的用法------------几乎不用
$("#btn3").click(function() {
layer.tab({
area: ['600px', '300px'],
tab: [{
title: 'TAB1',
content: '内容1'
}, {
title: 'TAB2',
content: '内容2'
}, {
title: 'TAB3',
content: '内容3'
}]
});
})
//演示图片层
$("#btn5").click(function() {
$.getJSON('/image.json', function(json){
layer.photos({
photos: json
,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});
});
})
//演示提示框
$("#btn6").click(function() {
//eg1
//layer.msg('只想弱弱提示');
//eg2
//layer.msg('有表情地提示', {icon: 6});
//eg3
// layer.msg('关闭后想做些什么', function(){
// //do something
// });
//eg
layer.msg('同上', {
icon: 1,
time: 2000 //2秒关闭（如果不配置，默认是3秒）
}, function(){
//do something
});
})
//演示tips
$("#btn7").click(function() {
layer.tips('只想提示地精准些', '#btn6',{tips:3});//tips控制方向的，上右下左，从1~4
})
});
</script>
</html>
13.2 layer 【公司，type为1和2，都用】
基础参数：
- type:
- 1：是一个页面层【此时的content属性，即可使用HTML代码，也可使用 css的选择器】
- 页面层可以把 当前所在页面的某一段HTML代码，放到弹出层里
- 2:是一个iframe层
- 页面层可以放一个url 路径，来通过get方式，来找到对应的页面
- 1：是一个页面层【此时的content属性，即可使用HTML代码，也可使用 css的选择器】
案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 1、把layui的css样式引入进来 -->
<link rel="stylesheet" href="layui/css/layui.css">
<!-- 2、把layui所需的js引入进来 -->
<script src="layui/layui.js"></script>
<title>layui form对象的使用</title>
<style>
/* layer中，设置按钮居中的样式，它被其他样式覆盖掉了，所以需要我们自己强制写一下 */
.layui-layer-btn-c{
text-align: center !important;
}
</style>
</head>
<body>
<button type="button" class="layui-btn" id="btn1">layer.type.open=0</button>
<button type="button" class="layui-btn" id="btn2">layer.type.open=1</button>
<button type="button" class="layui-btn" id="btn3">layer.type.open=2</button>
<button type="button" class="layui-btn" id="btn4">tab</button>
<form class="layui-form layui-form-pane" action="" lay-filter="myform" style="display: none;" id="form">
<!-- 一行显示一个输入框【原生的就是这种情况】 区别：它用的是layui-input-block-->
<div class="layui-form-item">
<label class="layui-form-label">用户名：</label>
<div class="layui-input-block">
<!-- name属性，提交表单的时候，它就会作为key，进行前后端数据的传递 -->
<input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入用户名：" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户密码：</label>
<div class="layui-input-block">
<input type="password" name="pwd" lay-verify="pwd" autocomplete="off" placeholder="请输入用户密码：" class="layui-input" >
</div>
</div>
<!-- 一行显示多个输入框 区别：它用的是layui-input-inline-->
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">用户手机</label>
<div class="layui-input-inline">
<!-- lay-verify="required|phone" 表示使用验证机制，这是是非空验证、手机号验证 -->
<input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">用户邮箱</label>
<div class="layui-input-inline">
<!-- lay-verify="email"这里是邮箱验证 -->
<input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<!-- 下拉选择框 -->
<div class="layui-form-item">
<label class="layui-form-label">籍贯</label>
<div class="layui-input-block">
<!-- lay-filter="jiguan" 给下拉框绑定事件，layui的语法 -->
<!-- 12.2.1 id='div_jiguan'-->
<select name="jiguan" lay-filter="jiguan" id='div_jiguan'>
<option value=""></option>
<option value="武汉">武汉</option>
<option value="上海" selected="">上海</option>
<option value="北京">北京</option>
</select>
</div>
</div>
</form>
</body>
<script>
//使用form表的，必须引入form模块，否则layui提供的页面效果无法正常显示出来
layui.use(['element','jquery','layer'], function(){
var $=layui.jquery;
var element=layui.element
var layer=layui.layer
//演示弹出层的用法----------默认是垂直居中的
$("#btn1").click(function() {
layer.open({
type: 1, //设置类型：默认为0 1为页面层 2 iframe层
titel:'提示',//标题
content: '你好吗？', //内容
skin:'layui-layer-lan' ,//设置皮肤，默认是蓝色
area:['500px','300px'] //设置宽、高
,offset:"auto" //默认：垂直水平居中 作用：设置弹出层在页面中要显示的位置
,btn: ['按钮一', '按钮二', '按钮三'] //给弹出层，添加按钮
,yes: function(index, layero){ //确定按钮的回调函数--------给弹出层的按钮，添加回调函数，用户点击按钮后，会触发该函数
//按钮【按钮一】的回调
layero.find('.layui-layer-btn').css('text-align', 'center'); //改变位置
alert("按钮一")
// layer.close(index)
}
,btn2: function(index, layero){
//按钮【按钮二】的回调
alert("按钮2")
return false //开启该代码可禁止点击该按钮关闭
}
,btn3: function(index, layero){
//按钮【按钮三】的回调
alert("按钮3")
return false //开启该代码可禁止点击该按钮关闭
},cancel: function(){ //点击弹出层的 关闭按钮，会触发该事件
//右上角关闭回调
alert("cancel")
//return false 开启该代码可禁止点击该按钮关闭
}
,btnAlign: "c"
,maxmin:true //是否显示最大化和最小化按钮【默认为false，不显示】 在type为1、2时，有效
,success: function(layero, index){
console.log(layero, index);//index为弹出层的索引，我们可以根据这个索引，来关闭这个弹出层
}
});
})
$("#btn2").click(function() {
layer.open({
type: 1, //设置类型：默认为0 1为页面层 2 iframe层
titel:'提示',//标题
content: $("#form"), //内容 type为1的时候，这里可以把页面上的某一端代码放到弹出层里【注意：这个代码是当前页面的】
skin:'layui-layer-lan' ,//设置皮肤，默认是蓝色
area:['500px','300px'] //设置宽、高
,offset:"auto" //默认：垂直水平居中 作用：设置弹出层在页面中要显示的位置
,btn: ['按钮一', '按钮二', '按钮三'] //给弹出层，添加按钮
,yes: function(index, layero){ //确定按钮的回调函数--------给弹出层的按钮，添加回调函数，用户点击按钮后，会触发该函数
//按钮【按钮一】的回调
layero.find('.layui-layer-btn').css('text-align', 'center'); //改变位置
alert("按钮一")
// layer.close(index)
}
,btn2: function(index, layero){
//按钮【按钮二】的回调
alert("按钮2")
return false //开启该代码可禁止点击该按钮关闭
}
,btn3: function(index, layero){
//按钮【按钮三】的回调
alert("按钮3")
return false //开启该代码可禁止点击该按钮关闭
},cancel: function(){ //点击弹出层的 关闭按钮，会触发该事件
//右上角关闭回调
alert("cancel")
//return false 开启该代码可禁止点击该按钮关闭
}
,btnAlign: "c"
,maxmin:true //是否显示最大化和最小化按钮【默认为false，不显示】 在type为1、2时，有效
,success: function(layero, index){
console.log(layero, index);//index为弹出层的索引，我们可以根据这个索引，来关闭这个弹出层
}
});
})
$("#btn3").click(function() {
layer.open({
type: 2, //设置类型：默认为0 1为页面层 2 iframe层
titel:'提示',//标题
content: '', //内容 type为2的时候，这里可以直接放另一个页面的url地址
skin:'layui-layer-lan' ,//设置皮肤，默认是蓝色
area:['500px','300px'] //设置宽、高
,offset:"auto" //默认：垂直水平居中 作用：设置弹出层在页面中要显示的位置
,btn: ['按钮一', '按钮二', '按钮三'] //给弹出层，添加按钮
,yes: function(index, layero){ //确定按钮的回调函数--------给弹出层的按钮，添加回调函数，用户点击按钮后，会触发该函数
//按钮【按钮一】的回调
layero.find('.layui-layer-btn').css('text-align', 'center'); //改变位置
alert("按钮一")
// layer.close(index)
}
,btn2: function(index, layero){
//按钮【按钮二】的回调
alert("按钮2")
return false //开启该代码可禁止点击该按钮关闭
}
,btn3: function(index, layero){
//按钮【按钮三】的回调
alert("按钮3")
return false //开启该代码可禁止点击该按钮关闭
},cancel: function(){ //点击弹出层的 关闭按钮，会触发该事件
//右上角关闭回调
alert("cancel")
//return false 开启该代码可禁止点击该按钮关闭
}
,btnAlign: "c"
,maxmin:true //是否显示最大化和最小化按钮【默认为false，不显示】 在type为1、2时，有效
,success: function(layero, index){
console.log(layero, index);//index为弹出层的索引，我们可以根据这个索引，来关闭这个弹出层
}
});
})
});
</script>
</html>
效果：
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)