layui學習筆記——layer彈出層

1、基礎參數

1layer:open基礎參數

layer.open({
    	  type: 1//基本層類型:0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）
    	 ,title:'新增'//標題:三種類型：（1）title :'我是標題'   （2）title: ['文本', 'font-size:18px;'] （3） title: false
    	 ,content: '好' //content:這裏content是一個DOM，注意：最好該元素要存放在body最外層，不然可能被其它的相對元素所影響
    	 ,skin: ''  //樣式類名 :自定義彈出框樣式
    	 ,area: ['500px', '300px'] //寬高:定義高度和寬度，不定義將自適應，能夠只定義一個
    	 ,offset: 'rt'  //座標:默認垂直水平居中
         ,btn: ['按鈕一', '按鈕二', '按鈕三']//按鈕:能夠是多個
         ,closeBtn: 1 //關閉按鈕：配置1和2來展現，若是不顯示，則closeBtn: 0
         ,shade: [0.8, '#393D49'] //遮罩：shade: [0.8, '#393D49']；若是不想顯示遮罩，能夠shade: 0
         ,shadeClose:true //是否點擊遮罩關閉：true表示點擊遮罩關閉，false表示點擊遮罩不關閉，默認false
         ,time: 5000 //自動關閉所需毫秒:秒後自動關閉,默認不會自動關閉
         ,id:'123'//用於控制彈層惟一標識:設置該值後，不論是什麼類型的層，都只容許同時彈出一個。通常用於頁面層和iframe層模式
         ,anim:1 //彈出動畫:支持的動畫類型有0-6 若是不想顯示動畫，設置 anim: -1 便可
         ,isOutAnim:false//關閉動畫 :關閉層時會有一個過分動畫。若是不想開啓，設置 isOutAnim: false 便可,默認true
         ,maxmin:true //最大最小化:該參數值對type:1和type:2有效。默認不顯示最大小化按鈕。須要顯示配置maxmin: true便可。默認false
         ,fixed:true //固定:即鼠標滾動時，層是否固定在可視區域。若是不想，設置fixed: false便可。默認爲true
         ,resize:false //是否容許拉伸:默認狀況下，能夠在彈層右下角拖動來拉伸尺寸。若是對指定的彈層屏蔽該功能，設置 false便可。該參數對loading、tips層無效。默認爲true
         ,resizing:function(layero){//監聽窗口拉伸動做:當拖拽彈層右下角對窗體進行尺寸調整時，若是設定了該回調，則會執行。回調返回一個參數：當前層的DOM對象。默認爲null
        	  console.log(layero);
         } 
         ,scrollbar:false//是否容許瀏覽器出現滾動條:默認容許瀏覽器滾動，若是設定scrollbar: false，則屏蔽
         ,maxWidth:300//最大寬度:設置彈出框最大寬度，只有當area: 'auto'時，maxWidth的設定纔有效。
         ,maxHeight:300//最大高度:設置彈出框最大高度，只有當高度自適應時，maxHeight的設定纔有效
         ,zIndex:199999//層疊順序
         ,move:'.mine-move' //觸發拖動的元素:如move: '.mine-move',表示可拖拽樣式爲mine-move的區域。配置設定move: false來禁止拖拽，默認'.layui-layer-title'
         ,moveOut:true//是否容許拖拽到窗口外:默認只能在窗口內拖拽，若是想讓拖到窗外，那麼設定moveOut: true便可
         ,moveEnd: function(layero){}//拖動完畢後的回調方法:其中layero爲當前層的DOM對象,默認爲null
         ,tips: [1, '#c00']//方向和顏色:支持上右下左四個方向，經過1-4進行方向設定,定義一些顏色，能夠設定tips: [1, '#c00']
         ,tipsMore: true//層彈出後的成功回調方法:容許多個意味着不會銷燬以前的tips層。經過tipsMore: true開啓
         ,success: function(layero, index){//層彈出後的成功回調方法:當須要在層建立完畢時即執行一些語句，能夠經過該回調,默認：null
        	    console.log(layero, index);//layero, index別是當前層DOM當前層索引
         }
         ,yes: function(index, layero){//肯定按鈕回調方法:該回調攜帶兩個參數，分別爲當前層索引、當前層DOM對象,默認：null
        	    //do something
        	    layer.close(index); //若是設定了yes回調，需進行手工關閉
        }
        ,cancel: function(index, layero){ //右上角關閉按鈕觸發的回調:該回調攜帶兩個參數，分別爲：當前層索引參數（index）、當前層的DOM對象（layero），默認會自動觸發關閉。若是不想關閉，return false便可,默認：null
        	  if(confirm('肯定要關閉麼')){ //只有當點擊confirm框的肯定時，該層纔會關閉
        		    layer.close(index)
          }
        }
        ,end:function(){//層銷燬後觸發的回調:不管是確認仍是取消，只要層被銷燬了，end都會執行，不攜帶任何參數。默認：null
        	
        }
        ,full:function(layero){//full/min/restore -分別表明最大化、最小化、還原 後觸發的回調,攜帶一個參數，即當前層DOM,默認：null
        	
        }
      });

二、按鈕回調方法

//eg1       
layer.confirm('納尼？', {
  btn: ['按鈕一', '按鈕二', '按鈕三'] //能夠無限個按鈕
  ,btn3: function(index, layero){
    //按鈕【按鈕三】的回調
  }
}, function(index, layero){
  //按鈕【按鈕一】的回調
}, function(index){
  //按鈕【按鈕二】的回調
});
 
//eg2
layer.open({
  content: 'test'
  ,btn: ['按鈕一', '按鈕二', '按鈕三']
  ,yes: function(index, layero){
    //按鈕【按鈕一】的回調
  }
  ,btn2: function(index, layero){
    //按鈕【按鈕二】的回調
    
    //return false 開啓該代碼可禁止點擊該按鈕關閉
  }
  ,btn3: function(index, layero){
    //按鈕【按鈕三】的回調
    
    //return false 開啓該代碼可禁止點擊該按鈕關閉
  }
  ,cancel: function(){ 
    //右上角關閉回調
    //return false 開啓該代碼可禁止點擊該按鈕關閉
  }
});

2、核心函數

一、layer.config(options) - 初始化全局配置

（1）採用seajs或者requirejs加載layer

layer.config({//layer就會去加載一些它所須要的配件，好比css等。  
  path: '/res/layer/' //layer.js所在的目錄，能夠是絕對目錄，也能夠是相對目錄
});

（2）採用<script src="?a.js&layer.js">這種合併的方式引入layer

layer.config({//layer就不會去自動去獲取路徑，但你須要經過如下方式來完成初始化的配置
  path: '/res/layer/' //layer.js所在的目錄，能夠是絕對目錄，也能夠是相對目錄
});

（3）layer.config(options) 能夠配置層默認的基礎參數，如：

layer.config({
  skin: 'layui-layer-molv' //默認皮膚
});

（4）除此以外，extend還容許你加載拓展的css皮膚，如：

layer.config({
  //若是是獨立版的layer，則將myskin存放在./skin目錄下
  //若是是layui中使用layer，則將myskin存放在./css/modules/layer目錄下
  extend: 'myskin/style.css'
});

二、layer.ready(callback) - 初始化就緒

三、layer.alert(content, options, yes) - 普通訊息框

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.msg(content, options, end) - 提示框

//eg1
layer.msg('只想弱弱提示');
//eg2
layer.msg('有表情地提示', {icon: 6}); 
//eg3
layer.msg('關閉後想作些什麼', function(){
  //do something
}); 
//eg
layer.msg('同上', {
  icon: 1,
  time: 2000 //2秒關閉（若是不配置，默認是3秒）
}, function(){
  //do something
});

六、layer.load(icon, options) - 加載層

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.tips(content, follow, options) - tips層

//eg1
layer.tips('只想提示地精準些', '#id');
//eg 2
$('#id').on('click', function(){
  var that = this;
  layer.tips('只想提示地精準些', that); //在元素的事件回調體中，follow直接賦予this便可
});
//eg 3
layer.tips('在上面', '#id', {
  tips: 1
});

八、layer.close(index) - 關閉特定層

（1）當想關閉當前頁的某個層時，每一種彈層調用方式，都會返回一個index

var index = layer.open();
var index = layer.alert();
var index = layer.load();
var index = layer.tips();
layer.close(index); //此時只須要把得到的index，輕輕地賦予layer.close便可

（2）當在iframe頁面關閉自身時

var index = parent.layer.getFrameIndex(window.name); //先獲得當前iframe層的索引
parent.layer.close(index); //再執行關閉

九、layer.closeAll(type) - 關閉全部層

layer.closeAll(); //瘋狂模式，關閉全部層
layer.closeAll('dialog'); //關閉信息框
layer.closeAll('page'); //關閉全部頁面層
layer.closeAll('iframe'); //關閉全部的iframe層
layer.closeAll('loading'); //關閉加載層
layer.closeAll('tips'); //關閉全部的tips層

十、layer.style(index, cssStyle) - 從新定義層的樣式

//從新給指定層設定width、top等
layer.style(index, {
  width: '1000px',
  top: '10px'
});

十一、layer.title(title, index) - 改變層的標題

十二、layer.getChildFrame(selector, index) - 獲取iframe頁的DOM

layer.open({
  type: 2,
  content: 'test/iframe.html',
  success: function(layero, index){
    var body = layer.getChildFrame('body', index);
    var iframeWin = window[layero.find('iframe')[0]['name']]; //獲得iframe頁的窗口對象，執行iframe頁的方法：iframeWin.method();
    console.log(body.html()) //獲得iframe頁的body內容
    body.find('input').val('Hi，我是從父頁來的')
  }
});

1三、layer.getFrameIndex(windowName) - 獲取特定iframe層的索引

//假設這是iframe頁
var index = parent.layer.getFrameIndex(window.name); //先獲得當前iframe層的索引
parent.layer.close(index); //再執行關閉

1四、layer.iframeAuto(index) - 指定iframe層自適應

1五、layer.iframeSrc(index, url) - //重置特定iframe url

1六、layer.setTop(layero) -置頂當前窗口

1七、layer.full()、layer.min()、layer.restore() - 手工執行最大小化

1八、layer.prompt(options, yes) - 輸入層

//例子2
layer.prompt({
  formType: 2,//輸入框類型，支持0（文本）默認1（密碼）2（多行文本）
  value: '初始值',
  title: '請輸入值',
  area: ['800px', '350px'] //自定義文本域寬高
}, function(value, index, elem){
  alert(value); //獲得value
  layer.close(index);
});

1九、layer.tab(options) - tab層

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

20、layer.photos(options) - 相冊層 （1）photos爲傳入json

$.getJSON('/jquery/layer/test/photos.json', function(json){
  layer.photos({
    photos: json
    ,anim: 5 //0-6的選擇，指定彈出圖片動畫類型，默認隨機（請注意，3.0以前的版本用shift參數）
  });
});

而返回的json需嚴格按照以下格式：

{
  "title": "", //相冊標題
  "id": 123, //相冊id
  "start": 0, //初始顯示的圖片序號，默認0
  "data": [   //相冊包含的圖片，數組格式
    {
      "alt": "圖片名",
      "pid": 666, //圖片id
      "src": "", //原圖地址
      "thumb": "" //縮略圖地址
    }
  ]
}

（2）直接從頁面中獲取圖片

<div id="layer-photos-demo" class="layer-photos-demo">
  <img layer-pid="圖片id，能夠不寫" layer-src="大圖地址" src="縮略圖" alt="圖片名">
  <img layer-pid="圖片id，能夠不寫" layer-src="大圖地址" src="縮略圖" alt="圖片名">
</div>

<script>
//調用示例
layer.photos({
  photos: '#layer-photos-demo'
  ,anim: 5 //0-6的選擇，指定彈出圖片動畫類型，默認隨機（請注意，3.0以前的版本用shift參數）
}); 
</script>

（3）photos還有個tab回調，切換圖片時觸發。

layer.photos({
  photos: json/選擇器,
  tab: function(pic, layero){
    console.log(pic) //當前圖片的一些信息
  }
});