彈出層layer的使用

Intro

layer是一款web彈層組件，致力于服務(wù)各個(gè)水平段的開(kāi)發(fā)人員。layer官網(wǎng)：http://layer.layui.com/
layer側(cè)重于用戶靈活的自定義，為不同人的使用習(xí)慣提供動(dòng)力。其意義在于，可以讓您的頁(yè)面擁有更豐富與便捷的操作體驗(yàn)，而您只需在調(diào)用時(shí)簡(jiǎn)單地配置相關(guān)參數(shù)，即可輕松實(shí)現(xiàn)。

layer.msg

語(yǔ)法：layer.msg(content[, options][, end]) 提示框

  layer.msg('這里是msg內(nèi)容');

  layer.msg('這里是msg內(nèi)容',{icon:1});

  layer.msg('關(guān)閉后想做些什么', function(){
      //do something
  });

  layer.msg('同上', {
    icon: 1,
    time: 2000 //2秒關(guān)閉（如果不配置，默認(rèn)是3秒）
  }, function(){
    //do something
  });

layer.alert

語(yǔ)法：layer.alert(content[, options][, yes]) 普通信息框

  //eg1
  layer.alert('只想簡(jiǎn)單的提示');    

  //eg2
  layer.alert('加了個(gè)圖標(biāo)', {icon: 1}); //這時(shí)如果你也還想執(zhí)行yes回調(diào)，可以放在第三個(gè)參數(shù)中。

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

layer.confirm

語(yǔ)法：layer.confirm(content[, options], yes[, cancel]) 詢問(wèn)框

  //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

語(yǔ)法：layer.prompt([options,] yes) 輸入層/詢問(wèn)層

  //prompt層新定制的成員如下
  {
    formType: 1, //輸入框類型，支持0（文本）默認(rèn)1（密碼）2（多行文本）
    value: '', //初始時(shí)的值，默認(rèn)空字符
    maxlength: 140, //可輸入文本的最大長(zhǎng)度，默認(rèn)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

語(yǔ)法：layer.open(options) 原始核心方法
基本上是露臉率最高的方法，不管是使用哪種方式創(chuàng)建層，都是走layer.open()，創(chuàng)建任何類型的彈層都會(huì)返回一個(gè)當(dāng)前層索引，上述的options即是基礎(chǔ)參數(shù)，另外，該文檔統(tǒng)一采用options作為基礎(chǔ)參數(shù)的標(biāo)識(shí)

  //example1:
  var index = layer.open({
    content: 'test'
  });
  //拿到的index是一個(gè)重要的憑據(jù)，它是諸如layer.close(index)等方法的必傳參數(shù)。

  //example2
  layer.open({
      type: 1 //Layer提供了5種層類型。可傳入的值有：0（信息框，默認(rèn)）1（頁(yè)面層）2（iframe層）3（加載層）4（tips層）
      ,title: 'title here'
      ,area: ['390px', '330px']
      ,shade: 0.4
      ,content: $("#test") //支持獲取DOM元素
      ,btn: ['yes', 'close'] //按鈕
      ,scrollbar: false //屏蔽瀏覽器滾動(dòng)條
      ,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

語(yǔ)法：layer.load(icon, options) 加載層
icon支持傳入0-2,如果是0，無(wú)需傳。另外特別注意一點(diǎn)：load默認(rèn)是不會(huì)自動(dòng)關(guān)閉的，因?yàn)槟阋话銜?huì)在ajax回調(diào)體中關(guān)閉它。

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

  //eg2
  var index = layer.load(1); //換了種風(fēng)格

  //eg3
  var index = layer.load(2, {time: 10*1000}); //又換了種風(fēng)格，并且設(shè)定最長(zhǎng)等待10秒 
  
  //關(guān)閉
  layer.close(index);

layer.tab

語(yǔ)法：layer.tab(options) tab層

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

More

更多詳情查看 這里