zoukankan      html  css  js  c++  java
  • layer初步使用

    type:基本层类型

    layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外)

    content - 内容

    content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同。类型:String/DOM/Array.

    btn - 按钮

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

    success - 层弹出后的成功回调方法

    类型:Function,默认:null.

    当你需要在层创建完毕时即执行一些语句,可以通过该回调。success会携带两个参数,分别是当前层DOM 当前层索引。

    layer.open({
      content: '测试回调',
      success: function(layero, index){
        console.log(layero, index);
      }
    });

    yes - 确定按钮回调方法

    类型:Function,默认:null

    该回调携带两个参数,分别为当前层索引、当前层DOM对象。如:

    layer.open({
      content: '测试回调',
      yes: function(index, layero){
        //do something
        layer.close(index); //如果设定了yes回调,需进行手工关闭
      }
    });

    cancel - 右上角关闭按钮触发的回调

    类型:Function,默认:null

    该回调同样只携带当前层索引一个参数,无需进行手工关闭。如果不想关闭,return false即可,如:

    //只有当点击confirm框的确定时,该层才会关闭
    cancel: function(index){ 
      if(confirm('确定要关闭么')){
        layer.close(index)
      }
      return false; 
    }

    end - 层销毁后触发的回调

    类型:Function,默认:null

    无论是确认还是取消,只要层被销毁了,end都会执行,不携带任何参数。

    • layer.alert(content, options, yes) - 普通信息框
    • layer.confirm(content, options, yes, cancel) - 询问框
    • layer.msg(content, options, end) - 提示框
    • layer.load(icon, options) - 加载层
    • layer.tips(content, follow, options) - tips层
    • layer.close(index) - 关闭特定层
    //当你想关闭当前页的某个层时
    var index = layer.open();
    var index = layer.alert();
    var index = layer.load();
    var index = layer.tips();
    //正如你看到的,每一种弹层调用方式,都会返回一个index
    layer.close(index); //此时你只需要把获得的index,轻轻地赋予layer.close即可
     
    //如果你想关闭最新弹出的层,直接获取layer.index即可
    layer.close(layer.index); //它获取的始终是最新弹出的某个层,值是由layer内部动态递增计算的
     
    //当你在iframe页面关闭自身时
    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
    parent.layer.close(index); //再执行关闭
    • layer.closeAll(type) - 关闭所有层
    • layer.style(index, cssStyle) - 重新定义层的样式
    • layer.title(title, index) - 改变层的标题
    • layer.getChildFrame(selector, index) - 获取iframe页的DOM
    • layer.setTop(layero) -置顶当前窗口
    //通过这种方式弹出的层,每当它被选择,就会置顶。
    layer.open({
      type: 2,
      shade: false,
      area: '500px',
      maxmin: true,
      content: 'http://www.layui.com',
      zIndex: layer.zIndex, //重点1
      success: function(layero){
        layer.setTop(layero); //重点2
      }
    });
  • 相关阅读:
    Ajax配合Node搭建服务器,运用实例
    mapMutations m
    seaJS使用教程
    节流函数
    【Gin-API系列】Gin中间件之日志模块(四)
    【Gin-API系列】配置文件和数据库操作(三)
    【Gin-API系列】请求和响应参数的检查绑定(二)
    【Gin-API系列】需求设计和功能规划(一)
    【ansible】api 调用出现ssh交互式输入
    【ansible】api 调试
  • 原文地址:https://www.cnblogs.com/feiyu6/p/6497990.html
Copyright © 2011-2022 走看看