弹出层layer的使用

发布时间:2020-11-16 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了弹出层layer的使用编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

弹出层layer的使用

Intro

layer是一款web弹层组件,致力于服务各个水平段的开发人员。layer官网:http://layer.layui.com/ layer侧重于用户灵活的自定义,为不同人的使用习惯提供动力。其意义在于,可以让您的页面拥有更丰富与便捷的操作体验,而您只需在调用时简单地配置相关参数,即可轻松实现。

layer.msg

语法:layer.msg(content[,options][,end]) 提示框

  layer.msg('这里是msg内容');

  layer.msg('这里是msg内容',{icon:1});

  layer.msg('关闭后想做些什么',function(){
      //do something
  });

  layer.msg('同上',{
    icon: 1,time: 2000 //2秒关闭(如果不配置,默认是3秒)
  },function(){
    //do something
  });

layer.alert

语法:layer.alert(content[,yes]) 普通信息框

  //eg1
  layer.alert('只想简单的提示');    

  //eg2
  layer.alert('加了个图标',{icon: 1}); //这时如果你也还想执行yes回调,可以放在第三个参数中。

  //eg3
  layer.alert('有了回调',function(index){
    //do something
    layer.close(index);
  });   

layer.confirm

语法:layer.confirm(content[,options],yes[,cancel]) 询问框

  //eg1
  layer.confirm('is not?',{icon: 3,title:'提示'},function(index){
    //do something
    layer.close(index);
  });

  //eg2
  layer.confirm('is not?',function(index){
    //do something
    layer.close(index);
  });

layer.propmt

语法:layer.prompt([options,] yes) 输入层/询问层

  //prompt层新定制的成员如下
  {
    formType: 1,//输入框类型,支持0(文本)默认1(密码)2(多行文本)
    value: '',//初始时的值,默认空字符
    maxlength: 140,//可输入文本的最大长度,默认500
  }

  //例子1
  layer.prompt(function(value,index,elem){
    alert(value); //得到value
    layer.close(index);
  });

  //例子2
  layer.prompt({
    formType: 2,value: '初始值',title: '这里是title'
  },function(value,elem){
    alert(value); //得到value
    layer.close(index);
  });

layer.open

语法:layer.open(options) 原始核心方法
基本上是露脸率最高的方法,不管是使用哪种方式创建层,都是走layer.open(),创建任何类型的弹层都会返回一个当前层索引,上述的options即是基础参数,另外,该文档统一采用options作为基础参数的标识

  //example1:
  var index = layer.open({
    content: 'test'
  });
  //拿到的index是一个重要的凭据,它是诸如layer.close(index)等方法的必传参数。

  //example2
  layer.open({
      type: 1 //Layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层),title: 'title here',area: ['390px','330px'],shade: 0.4,content: $("#test") //支持获取DOM元素,btn: ['yes','close'] //按钮,scrollbar: false //屏蔽浏览器滚动条,yes: function(index){
          //layer.msg('yes');
          layer.close(index);
          showToast();
      },btn2: function(){
          //layer.alert('aaa',{title:'msg title'});
          layer.msg('bbb');
          //layer.closeAll();
      }
  }); 

layer.load

语法:layer.load(icon,options) 加载层
icon支持传入0-2,如果是0,无需传。另外特别注意一点:load默认是不会自动关闭的,因为你一般会在ajax回调体中关闭它。

  //eg1
  var index = layer.load();

  //eg2
  var index = layer.load(1); //换了种风格

  //eg3
  var index = layer.load(2,{time: 10*1000}); //又换了种风格,并且设定最长等待10秒 

  //关闭
  layer.close(index);

layer.tab

语法:layer.tab(options) tab层

  layer.tab({
    area: ['600px','300px'],tab: [{
      title: 'TAB1',content: '内容1'
    },{
      title: 'TAB2',content: '内容2'
    },{
      title: 'TAB3',content: '内容3'
    }]
  });

More

常用功能示例代码:下载示例代码

更多详情查看 这里

总结

以上是编程之家为你收集整理的弹出层layer的使用全部内容,希望文章能够帮你解决弹出层layer的使用所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!