当前位置: > > > layer - 简单好用的Web弹出层组件使用详解1(安装配置、消息提示框)

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

一、基本介绍

1,什么是 layer?

  • layer 是一款近年来备受青睐的 web 弹层组件,可轻松实现 Alert Confirm Prompt / 普通提示 / 页面区块 / iframe tips 等等几乎所有的弹出交互。
  • layer 使用更少的代码展现更强健的功能,且格外注重性能的提升、易用和实用性。

2,网站地址


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); //如果配置了回调方法,就需要手动关闭提示框
});
评论0