文章出處

彈出層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'
    }]
  });

常用功能示例代碼：下載示例代碼

更多詳情查看這里

文章列表