弹出层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[, options][, 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, index, 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\'
    }]
  });

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

更多详情查看这里