1. 程式人生 > >layer 在標題中加點選監聽事件

layer 在標題中加點選監聽事件

本文來源於網路,自己拼湊。謝謝博主們的熱情分享。

在layer的標題裡面設定一個id="conform"

給這個id一個點選的監聽事件

$(document).on('click','#conform',function(){

test();

});

另外還需要設定屬性在layer中設定屬性

move:false;

layer屬性

 

鍵: 值 描述
下表的屬性都是預設值,您可在呼叫時按需重新配置,他們可幫助你實現各式各樣的風格。如是呼叫: $.layer({鍵: 值, 鍵: 值, …});
type: 0 層的型別。0:資訊框(預設),1:頁面層,2:iframe層,3:載入層,4:tips層。

此為重要引數,不同型別層的總開關,若為type:0則不需要配置,其它型別層在呼叫時必須設定type。

title: '資訊' 控制預設標題欄。 
如想自定義標題樣式,可以 title: ['標題', 'background:#c00;'] //第二個引數可書寫任意css 
如不想顯示標題欄,配置title: false 即可
maxmin: false 是否輸出視窗最小化/全屏/還原按鈕。 
如需要開啟,設定maxmin: true 即可 
此功能為layer1.8開始新增
offset: ['', ''] 控制層座標。
offset的值分別是: [縱座標, 橫座標],預設為垂直水平居中
如果您要設定縱座標,可以:offset:['200px', '']/td>
area: ['310px', '130px'] 控制層寬高。
area值分別為:[寬度, 高度]
當設定為auto時,意味著採用自適應(iframe層不能設定auto), 對於寬度,並不推薦您設定auto。
border: [10, 0.3, '#000'] 控制層的邊框。
border的值分別為:[邊框大小, 透明度, 顏色, layer1.8之前需在此處加true]
如果您不想顯示border,設定 border: [0] 即可
shade: [0.5, '#000'] 控制遮罩。
值分別是:[遮罩透明度, 遮罩顏色, layer1.8之前需在此處加true] 
如果不想顯示遮罩,配置shade: [0]即可
shadeClose: false 用來控制點選遮罩區域是否關閉層。
若開啟,設為true即可
closeBtn: [0, true] 控制層右上角關閉按鈕。
closeBtn的值分別為: [關閉按鈕的風格(支援0和1), true]
若不想顯示關閉按鈕,配置 closeBtn: false即可
time: 0 自動關閉等待秒數,整數值。
0表示不自動關閉,若3秒後自動關閉,time: 3即可
fix: true, 用於設定層是否不隨滾動條而滾動,固定在可視區域。
move: '.xubox_title' 設定某個元素來實現對層的拖拽。
值為:用來拖拽的元素選擇器
若不想拖拽,move: false即可
moveOut: false 用於控制層是否允許被拖出可視視窗外
moveType: 0 用於配置拖拽型別(layer1.7之前版本不支援)
預設為引導式拖動層,若值設為1,則直接拖動層
bgcolor: '#fff' 用於控制層的背景色
如果不想設定任何顏色,設定空字元即可。但是對於type:0的對話方塊層而言,始終都是白色
zIndex: 19891014 控制層堆疊順序(即css的z-index)。整數值。
合理設定它,可以避免與其它外掛的層級衝突
maxWidth: 400 最大寬度。整數值。
當area寬度設為auto時才有用。
fadeIn: 300, 用於控制層漸顯彈出(layer1.7之前版本不支援)
值為毫秒數
btns: 1, 按鈕的個數。提供了0-2的選擇,設定0表示不輸出按鈕
btn: ['確定', '取消'], [按鈕一的文字值 , 按鈕二的文字值]
必須btns值大於0才有效
shift: '', 用於控制動畫彈出
有七種選擇:左上(left-top),上(top), 右上(right-top),右下(right-bottom),下(bottom),左下(left-bottom),左('left')。
如shift:'top' 表示從上動畫彈出
dialog: {
    type: 3,
    msg: ''
}
                    
資訊框層模式提供的私有引數。使用時,按需配置即可 
type: 圖示型別,提供了0-16的選擇,也許有你喜歡的。 設定-1不顯示圖示 
msg: 資訊框內容,重要引數
page: {
	dom: '#id', 
	html: '',
	url: '',
	ok: function(datas){}
}
					
頁面層模式私有引數。 
dom: 頁面已存在的選擇器 
html: 直接傳入的html字串。 
url: ajax請求地址。 
ok: ajax請求完畢後執行的回撥,datas是非同步傳遞過來的值。 
需要特別注意的是,dom、html、url只需設定其中一個就行,若配置html或url,你必須也配置寬高值。
iframe: {
    src: '',
    scrolling: 'auto'
}
					
iframe層模式私有引數。 
src: 要開啟的網址。 
scrolling: 是否允許iframe出現滾動條,預設自動。允許:'yes',不允許:'no'
loading: {
    type: 0
}
                    
載入層私有屬性。 
type: loading圖示型別(提供了0-3的選擇)。 
一般配合ajax使用
tips : {
    msg: '',
    follow: '#id',
	guide: 0,
	isGuide: true,
    more: false,
	style: ['', '']
}          
                    
tips提示層私有屬性。 
msg: 提示內容。 
follow: 吸附目標選擇器。 
guide: 指引方向(0:上,1:右,2:下,3:左)。 
isGuide: 是否顯示預設三角形。 這個引數可配合msg幫助你自定義三角形icon 
more: 是否允許多個tips 
style: [' color:#000; border:1px solid #FF9900; /* 此處可用來自定義tips的css樣式 */', '#FF9900']]。 陣列第二個值,為三角形的顏色。
回撥函式
success: function(layero){

}
                    
層彈出成功後的回撥函式. 
layero是回撥傳過來的當前層容器的例項,這意味著你可以對當前彈層進行dom操作
yes: function(index){}
                    
按鈕一的回撥函式 
index為當前層的索引,主要用來回調執行後,配合layer.close(index)來關閉層
no: function(index){}
                    
按鈕二的回撥函式
close: function(index){}
                    
層右上角關閉按鈕的點選事件觸發回撥函式。
end: function(){}
                    
層被徹底關閉後執行的回撥函式。
moveEnd: function(){}
                    
拖拽完畢觸發的回撥函式
min: function(layero){},
full: function(layero){},
restore: function(layero){}
                    
分別為最小化、全屏、還原觸發後的回撥函式 
layero是當前層容器的例項 
layer1.8開始新增