航歌 - 做最好的开发者知识平台

留言首页

当前位置：
首页
>
编程社区
>
其他
> layer - 简单好用的Web弹出层组件使用详解1（安装配置、消息提示框）

layer - 简单好用的Web弹出层组件使用详解1（安装配置、消息提示框）

2018-05-23 发布：hangge 阅读：1810

一、基本介绍

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 这个配置属性可以修改提示框显示的时间。
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); //如果配置了回调方法，就需要手动关闭提示框
});

上一篇Fabric.js - 改变鼠标指针样式（鼠标手型、光标样式）下一篇layer - 简单好用的Web弹出层组件使用详解2（询问框、loading层、tip提示）

打赏支持

评论（0）

提交

文章类别

编程社区
SwiftFlex / FlashHTML5 / CSS3CordovaSpringBoot / CloudDocker / K8sReact / RN其他
奇文共赏

本类相关

CentOS - 修改主机名教程（将 localhost.localdomain 改成其它名字）

Vue.js - Transition过渡动画的使用5（结合animate.css动画库的使用）

Vue.js - Transition过渡动画的使用4（使用transition-group实现列表过渡）

JS - Lodash工具库的使用详解15（深比较，判断是否包含某属性或属性值）

TIOBE - 2016年3月编程语言排行榜

JS - PDF文件生成库jsPDF使用详解5（将html页面导出为pdf）

Vue.js - 解决npm run build报错（TypeError: Cannot read property 'compilation' of undefined vue）

jQuery - 拦截所有Ajax请求（统一处理超时、返回结果、错误状态码 ）

js - 计算本月最后一天日期（或任意月最后一天日期）

HBase的介绍与安装教程1（基本介绍、系统架构说明）

移动版给我留言打赏支持

© copyright 2006-2021 航歌. All rights reserved. 苏ICP备14040777号