layui弹出层layer的使用

共计 2272 个字符，预计需要花费 6 分钟才能阅读完成。

语法：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(content[, options][, yes]) 普通信息框

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

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

语法：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.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, index, elem){alert(value); // 得到 value
    layer.close(index);
  });

语法：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(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(options) tab 层

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