layer - 简单好用的Web弹出层组件使用详解1(安装配置、消息提示框)
一、基本介绍
1,什么是 layer?
- layer 是一款近年来备受青睐的 web 弹层组件,可轻松实现 Alert / Confirm / Prompt / 普通提示 / 页面区块 / iframe / tips 等等几乎所有的弹出交互。
- layer 使用更少的代码展现更强健的功能,且格外注重性能的提升、易用和实用性。
2,网站地址
- 官网地址:http://layer.layui.com/
- GitHub 主页:https://github.com/sentsin/layer/
3,安装配置
(1)layer 库下载并解压后,将整个 layer 文件夹放到项目中来,这里面除了 js 库外还自带了一套默认皮肤。
(2)接着在需要使用 layer 的页面中将 layer.js 引入即可。同时由于其依赖 jQuery,我们还需要引入 jQuery。
<script src="js/jquery-3.1.1.js"></script> <script src="js/layer/layer.js"></script>
二、简单的消息提示框(msg)
该提示框的特点是只有消息内容,且经过一段时间后会自动消失。
1,基本用法
layer.msg('欢迎访问 hangge.com');
2,带有图标的提示
layer.msg('欢迎访问 hangge.com', {icon: 6});
3,修改自动关闭的时间
(1)通过 time 这个配置属性可以修改提示框显示的时间。
(2)如果将 time 设置为 0,则提示框会一直显示,之后需要我们手动将其关闭。
layer.msg('欢迎访问 hangge.com', {time: 2000}); //改成2秒(默认为3秒)
(2)如果将 time 设置为 0,则提示框会一直显示,之后需要我们手动将其关闭。
- 可以通过提示框索引将其关闭:
var index = layer.msg('欢迎访问 hangge.com', {time: 0}); //提示框不会自动消失 //2秒后手动将其关闭 setTimeout(function(){ layer.close(index); },2000);
- 或者直接调用 closeAll() 方法关闭全部弹出框:
layer.msg('欢迎访问 hangge.com', {time: 0}); //提示框不会自动消失 //2秒后手动将其关闭 setTimeout(function(){ layer.closeAll(); },2000);
4,自动关闭后的回调
layer.msg('欢迎访问 hangge.com', function(){ //do something });
5,综合使用
layer.msg('欢迎访问 hangge.com', { icon: 6, time: 2000 //改成2秒(默认为3秒) }, function(){ //do something });
三、信息提示框(alert)
该提示框有点类似系统的 alert,它不会自动消失,点击“确定”按钮后才会关闭。
1,基本用法
layer.alert('欢迎访问 hangge.com');
2,修改提示框标题
layer.alert('欢迎访问 hangge.com', {title: "我是标题"});
3,带有图标的提示
layer.alert('欢迎访问 hangge.com', {icon: 6});
4,确定按钮点击回调
layer.alert('欢迎访问 hangge.com', function(index){ //do something layer.close(index); //如果配置了回调方法,就需要手动关闭提示框 });
5,修改按钮文字
layer.alert('欢迎访问 hangge.com', {btn: "点个赞"});
6,综合使用
layer.alert('欢迎访问 hangge.com', { title: "我是标题", icon: 6, btn: "点个赞" }, function(index){ //do something layer.close(index); //如果配置了回调方法,就需要手动关闭提示框 });