layer參數配置
官網API:http://layer.layui.com
layer API之鍵值(僅在需要時配置,未配置的會用默認)
鍵 : 值描述
skin : 0層的皮膚編號,值為整數型。目前默認只提供一種皮膚,當你按照樣式規則新增皮膚時(詳見skin/layer.css),你可配置該參數。
type : 0,層的類型。0:信息框(默認),1:頁面層,2:iframe層,3:加載層,4:tips層。此為重要參數,不同類型層類型的總開關,調用時必須設置。
shade : [0.5 , '#000' , true]控制遮罩。0.5:遮罩透明度,’#000′:遮罩顏色,true:是否遮罩(否:false)
shadeClose : false用來控制點擊遮罩區域是否關閉層。(是:true)。
fix : true,層是否固定在可視區域。否:false
move : ['.xubox_title' , true]控制層拖拽。’.xubox_title’:拖拽綁定事件所在元素選擇器(默認為標題欄),true:是否允許拖拽(否:false)
title : ['信息' , true]控制標題欄。’信息’:標題欄文字,true:是否顯示標題欄(否:false)
offset : ['220px' , '50%']控制層坐標。’220px’:縱坐標,’50%’:橫坐標。 需要注意的是,像素必須帶px單位,百分比不需要。該參數靈活運用,可助你實現諸多特效。
area : ['310px' , 'auto']控制層寬高。’310px’:寬,’auto’:高。 當設置為auto時,意味著采用自適應, 當然,對于寬度,并不推薦您這樣做。
closeBtn : [0 , true]控制層右上角關閉按鈕。0:關閉按鈕風格(1:風格2),當標題欄不存在時,自動切換為風格2。 true:是否顯示關閉按鈕(否:false)
time : 0自動關閉等待秒數,整數值。也許它可以助你做蠻多事,想象一下吧。
border : [10 , 0.3 , '#000', true]10:邊框大小,0.3:邊框透明度,’#000′:邊框顏色,true:是否顯示邊框(否:false)。通過它您可以任意配置邊框,譬如你覺得邊框礙眼,趕緊啟用[0,0,'',false]吧
zIndex : 19891014控制層堆疊順序(z-index)。整數值,默認是賢心的生日。合理設置它,可以避免與其它插件的層級沖突
maxWidth : 400最大寬度。整數值。當寬度設為auto時才有用。
fadeIn : [300 , false]控制層的漸顯。300:漸顯頻率,false:是否開啟漸顯(默認不開啟,true:開啟) 從來都覺得這參數形同虛設。
dialog: {
btns : 1,
btn : ['確定', '取消'],
type : 3,
msg : '',
yes : function(index){ },
no : function(index){ }
}
信息框層模式提供的私有參數。使用時,按需配置即可
btns : 按鈕的個數。提供了0-2的選擇
btn : [按鈕一的文本值 , 按鈕二的文本值]
type : 圖標類型,提供了0-10的選擇,也許有你喜歡的。
msg : 信息框內容,重要參數
yes : 按鈕一的回調函數
no : 按鈕二的回調函數
page: {
dom: '#xulayer',
html: ''
}
頁面層模式私有參數。dom:需要彈出的html片段所對應的選擇器(class或 id,推薦用id,確保唯一)。需要注意的是,html優先級高于dom,這意味著,當你一旦配置了html的非空值,將優先采用html中的元素彈出,并且不支持area的自適應模式,你必須配置寬高值。html參數為layer-v1.5.1開始新增。
iframe: {
src: 'http://sentsin.com'
}
iframe層模式私有參數。src:要打開的網址。使用率非常高,尤其是對于喜歡用iframe的同學。
loading : {type : 0}加載層私有屬性。type:loading圖標類型(提供了0-3的選擇,試試吧,看看有無你喜歡的)。一般配合ajax使用
tips : {
msg: '',
follow: '',
guide: 0,
style: ['tips自定義樣式', '三角形顏色']
}
tips小提示層私有屬性。msg:提示內容,follow:觸發事件對應的選擇器。 guide:指引方向(0:上下,1:左右)。[自定義樣式示例] style: ['background-color:#FFF8ED; color:#000; border:1px solid #FF9900', '#FF9900']]。layer-v1.5.1開始,對tips逐漸有了較為完善的支持,提供了上下和左右模式,可智能識別指引方向。
success : function(layer){}層彈出成功后的回調函數
close : function(index){}層右上角關閉按鈕的回調函數。
end : function(){}層被徹底關閉后執行的回調函數。它的存在讓close回調成為浮云。
layer API之內置方法
方法名描述
$.layer({})核心接口,參數是一個對象,對象屬性參見上述列表。諸如layer.alert()之類的為$.layer()的包裝方法。
layer.v獲取版本號。
layer.ready(callback)layer中的樣式文件裝載完畢后執行的方法,一般用于頁面加載時調用layer,這樣可避免樣式未加載即調用層導致的錯亂。 示例:
layer.ready(function(){
layer.msg('Hello Layer');
});
layer.alert()對單按鈕信息框的重新封裝,layer.alert(alertMsg , alertType, alertTit , alertYes),四個參數,alertMsg:信息內容(文本),alertType:提示圖標(整數,0-10的選擇),alertTit:標題(文本),alertYes:按鈕的回調函數。 如:layer.alert(‘前端攻城師賢心’)
layer.confirm()對詢問框的重新封裝,layer.confirm(conMsg? , conYes , conTit , conNo),四個參數,conMsg:信息內容(文本),conYes:按鈕一回調,conTit:標題(文本),conNo:按鈕二的回調。??????????????????? 如:
layer.confirm('確定刪除?', function(){
layer.msg('刪除成功!')
});
layer.msg()對無標題欄信息框層的重新封裝,layer.msg(msgText , msgTime , msgType , callback),四個參數,msgText:信息內容(文本),msgTime:自動關閉所需等待秒數(默認2秒),msgType:提示圖標(整數,0-10的選擇),callback:自動銷毀后的回調函數。如:layer.msg(‘嗨,伙計,我是layer’)
layer.tips()對tips層的重新封裝,layer.tips(html , follow , time , maxWidth, guide, style),四個參數,html:信息內容(文本),follow:觸發事件對應的選擇器,time:自動關閉所需等待秒數,maxWidth:最大寬度,guide: 0(上下模式)或者1(左右模式) style: tips樣式(參加api表格一中的style屬性)如:
$('.demo').click(function(){
layer.tips('這是小提示',this);
});
layer.load()對加載層的重新封裝,layer.load(loadTime , loadgif , loadShade),三個參數,loadTime:自動關閉所需等待秒數(0時則不自動關閉),loadgif:加載圖標(整數,0-3的選擇),loadShade:是否遮罩(true 或 false)。如:layer.load(0);
layer.getChildFrame(selector)獲取子iframe中的DOM。非常實用,父窗口操作iframe中內容時可以大顯神威。如:layer.getChildFrame(‘body’).html() //得到iframe的body的全部html元素
layer.getFrameIndex()獲取iframe層的索引。 如在iframe頁中關閉自身:
var i = parent.layer.getFrameIndex();
parent.layer.close(i);
layer.close(index)用于手動關閉層。參數為layer的索引值。索引即通過彈出方法返回的值。如:
var i = $.layer({}); //或者 var i = layer.alert();之類的也可返回索引
layer.close('i');
layer.shift(type , rate)layer彈出時內置動畫,type:動畫類型,供四種中選擇,左上:’left-top’,右上:’right-top’,左下:’left-bottom’,右下:’right-bottom’ 。 rate:動畫頻率,毫秒。 如:
success : function(){
layer.shift('right-bottom' , 400);
}
layer.autoArea(index)用來處理在層中寬高改變時,重新自適應層寬高。必填參數為層的索引值
layer.iframeAuto()用于讓iframe層自適應。非常實用,詳見官網實例演示之iframe子父操作。
layer.setMove()當拖拽元素改變時,可用此方法重新初始化拖拽。
r?}????