1、layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。
PC版的layer弹层 官网地址: https://layer.layui.com/
PC版的layer弹层 API地址: https://www.layui.com/doc/modules/layer.html
前端UI框架layui 官网地址: https://www.layui.com/
layer移动版弹层 官网地址: https://layer.layui.com/mobile/
layer移动版弹层 API地址: https://layer.layui.com/mobile/api.html
layer 只是作为 layui 的一个弹层模块,由于其用户基数较大,所以至今仍把她作为独立组件来维护。不过请注意:无论是独立的 layer,还是作为内置模块的 layer,文档都以本页为准。
layer弹层组件移动版介绍以及使用方法示例代码:https://blog.csdn.net/qq_40015157/article/details/111880625
2、使用场景
由于layer可以独立使用,也可以通过Layui模块化使用。所以请按照你的实际需求来选择。
场景 | 用前准备 | 调用方式 |
---|---|---|
1. 作为独立组件使用 | 如果你只是单独想使用 layer,你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本,并引入layer.js。 | 通过script标签引入layer.js后,直接用即可。 |
2. layui 模块化使用 | 如果你使用的是 layui,那么你直接在官网下载 layui 框架即可,无需引入 jQuery 和 layer.js,但需要引入layui.css和layui.js | 通过layui.use('layer', callback)加载模块 |
作为独立组件使用 layer
- 引入好layer.js后,直接用即可
- <script src="layer.js"></script>
- <script>
- layer.msg('hello');
- </script>
在 layui 中使用 layer
- layui.use('layer', function(){
- var layer = layui.layer;
- layer.msg('hello');
- });
除了上面有所不同,其它都完全一致。
3、layer弹层组件PC独立版示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layer弹层组件PC独立版示例</title>
<style>
button {
height: 35px;
line-height: 35px;
border-radius: 2px;
background-color: #1AA094;
color: #fff;
border: none;
margin-bottom: 10px;
}
</style>
</head>
<body>
<button id="btn1">初体验</button>
<button id="btn2">提示层</button>
<button id="btn3">loading层</button>
</body>
</html>
<script src="../jquery.min.js"></script>
<script src="layer/layer.js"></script>
<script>
$("#btn1").on("click", function () {
//初体验
layer.alert('内容')
})
$("#btn2").on("click", function () {
//提示层
layer.msg('玩命提示中',{"icon" : 2});
})
$("#btn3").on("click", function () {
//loading层
var index = layer.load(1, {
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
})
</script>
4、效果图: