5 弹层组件文档- layui.layer

icon - 图标。信息框和加载层的私有参数

类型:Number,默认:-1(信息框)/0(加载层)

信息框默认不显示图标。当你想显示图标时,默认皮肤可以传入0-6如果是加载层,可以传入0-2。如:

//eg1
layer.alert('酷毙了', {icon: 1});
//eg2
layer.msg('不开心。。', {icon: 5});
//eg3
layer.load(1); //风格1的加载
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../layui/layui.js"></script>

</head>
<body>


   <script>

       layui.use('layer',function(){
          var layer=layui.layer;
   layer.msg('hello');
           layer.msg('不开心。。', {icon: 5});

       });

   </script>
</body>
</html>

Btn按钮

类型:String/Array,默认:'确认'

信息框模式时,btn默认是一个确认按钮,其它层类型则默认不显示,加载层和tips层则无效。当您只想自定义一个按钮时,你可以btn: '我知道了',当你要定义两个按钮时,你可以btn: ['yes', 'no']。当然,你也可以定义更多按钮,比如:btn: ['按钮1', '按钮2', '按钮3', …],按钮1的回调是yes,而从按钮2开始,则回调为btn2: function(){},以此类推。如:

//eg1       
layer.confirm('纳尼?', {
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});
-----------
 layui.use('layer',function(){
          var layer=layui.layer;
          layer.msg('hello');
           layer.msg('不开心。。', {icon: 5});
           layer.confirm('你好',{
 btn:['按钮一','按钮二','按钮三']//可以无限个按钮
               ,btn3: function (index,layerno) {
                   //按钮【按钮三】的回调
                   layer.msg('不开心。。', {icon: 1});
               }
 },function (index,layero) {
               //按钮【按钮一】的回调
               layer.msg('不开心。。', {icon:2});
           },function (index,layero) {
               //按钮【按钮二】的回调
               layer.msg('不开心。。', {icon: 5});
           });
   });

给配置层设置默认的参数

layer.config({
  anim: 1, //默认动画风格
  skin: 'layui-layer-molv' //默认皮肤
  …
});
//除此之外,extend还允许你加载拓展的css皮肤,如:
layer.config({
  //如果是独立版的layer,则将myskin存放在./skin目录下
  //如果是layui中使用layer,则将myskin存放在./css/modules/layer目录下
  extend: 'myskin/style.css'
});

layer.ready(callback) -初始化就绪

由于我们的layer内置了轻量级加载器,所以你根本不需要单独引入css等文件。但是加载总是需要过程的。当你在页面一打开就要执行弹层时,你最好是将弹层放入ready方法中,如:

//页面一打开就执行弹层
layer.ready(function(){
layer.msg('很高兴一开场就见到你');
});
```

layer.msg(content, options, end) - 提示框

//eg1
layer.msg('只想弱弱提示');
//eg2
layer.msg('有表情地提示', {icon: 6}); 
//eg3
layer.msg('关闭后想做些什么', function(){
  //do something
}); 
//eg
layer.msg('同上', {
  icon: 1,
  time: 2000 //2秒关闭(如果不配置,默认是3秒)
}, function(){
  //do something
});   
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../layui/layui.js"></script>
</head>
<body>

1111111111

</body>
   <script>
  layui.use('layer',function(){
          var layer=layui.layer;
           //页面一打开就执行弹层
           layer.ready(function(){
               layer.msg('很高兴一开场就见到你');
           });
 layer.open({
               title: '回车关闭测试'
               ,content: '我是内容'
               ,btn: ['确认','关闭']
   ,success: function(layero, index){
                   this.enterEsc = function(event){
                       if(event.keyCode === 13){
                           layer.close(index);
                           return false; //阻止系统默认回车事件
             }
                   };
                   $(document).on('keydown', this.enterEsc);    //监听键盘事件,关闭层
               }
               ,end: function(){
  }
           });

           layer.open({
             content: '回调',
             yes: function (index,layero) {
                 //do something
                 layer.close(index);//如果设置也是回调,需要进行手工关闭
             }
  });
           layer.config({
               anim: 1, //默认动画风格
               skin: 'layui-layer-molv' //默认皮肤

       });
   layer.msg('hello');
           layer.msg('不开心。。', {icon: 5});
           layer.confirm('你好',{
               btn:['按钮一','按钮二','按钮三']//可以无限个按钮
               ,btn3: function (index,layerno) {
                   //按钮【按钮三】的回调
                    layer.msg('不开心。。', {icon: 1});
               }
           },function (index,layero) {
               //按钮【按钮一】的回调
               layer.msg('不开心。。', {icon:2});
           },function (index,layero) {
      //按钮【按钮二】的回调
               layer.msg('不开心。。', {icon: 5});
           });

   });






































猜你喜欢

转载自blog.csdn.net/weixin_33787529/article/details/86958271