layer - 简单好用的Web弹出层组件使用详解2（询问框、loading层、tip提示）

2018-05-25 发布：hangge 阅读：3821

四、询问框、确认框（confirm）

这种类型的提示框有点类似系统的 confirm，它除了有“确定”按钮外，还有个“取消”按钮。

1，基本用法

layer.confirm('确定要删除吗?', function(index){
  //点击确定后的回调
  //do something

  layer.close(index);
});

2，修改提示框的标题

layer.confirm('确定要删除吗?', {title:'我是标题'}, function(index){
  //点击确定后的回调
  //do something

  layer.close(index);
});

3，带有图标的提示

layer.confirm('确定要删除吗?', {icon: 0}, function(index){
  //点击确定后的回调
  //do something

  layer.close(index);
});

4，取消按钮点击回调

layer.confirm('确定要删除吗?', function(index){
  //点击确定后的回调
  //do something

  layer.close(index);
}, function(index){
  //点击取消后的回调
  //do something

  layer.close(index);
});

5，修改按钮文字

layer.confirm('确定要删除吗?', {
   btn: ['按钮1', '按钮2']
}, function(index){
  layer.msg("点击了第一个按钮");
}, function(index){
  layer.msg("点击了第二个按钮");
});

6，设置多个按钮

layer.confirm('确定要删除吗?', {
   btn: ['按钮1', '按钮2', '按钮3', '按钮4'],
   area: '450px',
   btn3: function(index, layero){
     layer.msg("点击了第三个按钮");
   },
   btn4: function(index, layero){
     layer.msg("点击了第四个按钮");
   },
}, function(index){
  layer.msg("点击了第一个按钮");
}, function(index){
  layer.msg("点击了第二个按钮");
});

7，综合使用

layer.confirm('确定要删除吗?', {
  title: '我是标题',
  icon: 3,
  btn: ['按钮1', '按钮2']
}, function(index){
  //点击第一个按钮后的回调
  //do something
  layer.close(index);
}, function(index){
  //点击第二个按钮后的回调
  //do something
  layer.close(index);
});

五、加载层（load）

加载层常用在 ajax 加载过程中给用户一个 loading 提示。

1，基本用法

注意：load 默认是不会自动关闭的，通常我们需要在 ajax 回调中关闭它。

//显示加载层
var index = layer.load();

//2秒后将其关闭
setTimeout(function(){
  layer.close(index);
}, 2000);

2，样式风格修改

layer 自带了下面三种加载样式，根据传入的值（0~2）自动改变，如果是 0 的话可以不用传。

//样式1
layer.load();

//样式2
layer.load(1);

//样式3
layer.load(2);

3，定时自动关闭

//2秒钟后自动关闭
layer.load(0, {time: 2*1000});

六、tip 提示层（tips）

tips 层有点类似于前面介绍的 msg，它同样会自动消失。不同的是，tips 层会智能定位，即灵活地判断它应该出现在哪里。

1，基本用法

tips 层默认是在元素右边弹出。下面样例当页面打开时，自动在 id 为 username 的输入框右侧显示一个 tip 提示。

<script>
  window.onload = function() {
    layer.tips('用户名必须填写!', '#username');
  }
</script>

<input id="username" type="text" style="height:35px;">

2，修改显示位置

//提示tip在元素上方
layer.tips('用户名必须填写!', '#username', {tips: 1});

//提示tip在元素右侧
layer.tips('用户名必须填写!', '#username', {tips: 2});

//提示tip在元素下方
layer.tips('用户名必须填写!', '#username', {tips: 3});

//提示tip在元素左侧
layer.tips('用户名必须填写!', '#username', {tips: 4});

3，修改背景颜色

layer.tips('用户名必须填写!', '#username', {tips: [2,'#0FA6D8']});

4，同时显示多个 tips

默认情况下当显示新的 tips 时，之前的 tips 会自动销毁（其它类型的提示框也是一样）。我们可以通过 tipsMore: true 这个配置允许多个 tips 同时存在。

layer.tips('这是右侧的tips', '#username');
layer.tips('这是上方的tips', '#username', {tips:1, tipsMore: true});

5，修改自动消失的时间

layer.tips('用户名不能为空', '#username', {time: 2000}); //改成2秒（默认为3秒）

6，不自动消失

通过 time: 0 配置可以取消 tips 的自动关闭功能。下面样例，当鼠标移到输入框上时 tips 提示会一直显示，而鼠标移出后 tips 自动消失。

var index;

$("#username").on({
    mouseover : function(){
        var that = this;
        //鼠标移入自动显示tips
        index = layer.tips('用户名不能为空', that, {time: 0}); //不自动关闭
    } ,
    mouseout : function(){
        //鼠标移出自动关闭tips
        layer.close(index);
    }
}) ;