官網：http://sentsin.com/jquery/layer/
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 7 <script type="text/javascript" src="layer.min.js"></script> 8 9 </head> 10 <body> 11 <input type="button" class="testBtn" value="click me"> 12 <script type="text/javascript"> 13 /*layer.alert('白菜級別前端攻城師賢心', 1);*/ 14 /*layer.confirm('白菜級別前端攻城師賢心', 8);*/ 15 /*layer.load('加載中……',4);*/ 16 /*$.layer({ 17 shade : [0], //不顯示遮罩 18 area : ['auto','auto'], 19 dialog : { 20 msg:'您是如何看待前端開發？', 21 btns : 2, 22 type : 4, 23 btn : ['重要','奇葩'], 24 yes : function(){ 25 //layer.msg('您選擇了重要。',2,1); 26 layer.closeAll(); 27 }, 28 no : function(){ 29 layer.msg('奇葩!!!',2,4); 30 } 31 } 32 });*/ 33 $('.testBtn').on('click',function(){ 34 layer.tips('tips的樣式並非是固定的，您可自定義外觀。', this, { 35 style: ['background-color:#E227C7; color:#fff', '#E227C7'], 36 maxWidth:185, 37 closeBtn:[0,true] //顯示關閉按鈕 38 }); 39 }) 40 41 </script> 42 </body> 43 </html>
常見接口如下：
| 方法名 | 描述 |
| $.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, parme),三個參數，1.7.0開始對參數做了多重判斷，msgText：信息內容（文本），msgTime：自動關閉所需等待秒數（默認2秒），如 果parme是一個數字，則將作為msg的圖標參數，如果parme是一個函數，則將作為層消失后的end的回調，如果parme是一個object，您 可配置{type:圖標類型,shade：false//是否遮罩，如果是，不用配置,rate:'top'//彈出的動畫類型，具體值見 layer.shift的參數說明} |
| layer.tips() | 對tips層的重新封裝，layer.tips(html, follow, parme),三個參數，html：信息內容（文本），follow：觸發事件對應的選擇器，parme是一個對象，其中包含了{time:自動關閉所需 等待秒數, maxWidth:最大寬度, guide:指引方向, style: tips樣式（參加api表格一中的style屬性）} 如： $('.demo').click(function(){
layer.tips('這是小提示',this);
});
|
| layer.load(parme, loadIcon) | 對加載層的重新封裝，如果你想在loading中附加一些文字的話，您可以這樣：layer.load('加載中'); 如果parme是一個數字，意味着parme為自動關閉所需最長等待秒數(0時則不自動關閉)，loadIcon：加載圖標（整數，0-3的選擇） 如：layer.load(0, 1); |
| layer.area(index, options) | 用於重定義指定層的寬高、坐標、z-index等。index為層的索引，options包含 {width:'',height:'',top:'',left:'',zIndex:''}等css屬性。該方法僅針對頁面層（type:1）和 iframe層（type:2）有效; 此方法為1.6.0開始新增 |
| layer.index | 靜態屬性，用於獲取最近一次觸發的層索引值 |
| layer.getChildFrame(selector, index) | 獲取子iframe中的DOM。非常實用，父窗口操作iframe中內容時可以大顯神威。index參數為1.6.0開始新增，由於允許彈出多個iframe層，所以需借助index索引來操作指定層 |
| layer.getFrameIndex(window.name) | 獲取當前所在iframe層的索引。 只允許在iframe頁面內部調用。如在內部關閉自身： var i = parent.layer.getFrameIndex(window.name); parent.layer.close(i); |
| layer.close(index) | 用於手動關閉層。參數為layer的索引值。索引即通過彈出方法返回的值。如:
var i = $.layer({}); //或者 var i = layer.alert();之類的也可返回索引
layer.close('i');
|
| layer.closeAll() | 用於關閉所有層，在多層模式時也許會用到 |
| layer.shift(type , rate) | layer彈出時內置動畫，在success回調中使用。type：動畫類型，供七種選擇，左上(left-top),上(top), 右上(right-top),右下(right-bottom),下(bottom),左下(left-bottom),左('left')。 rate:動畫頻率，毫秒。 如： success : function(){
layer.shift('right-bottom' , 400); //右下角彈出，400毫秒速率
}
|
| layer.autoArea(index) | 用來處理在層中寬高改變時，重新自適應層寬高。必填參數為層的索引值 |
| layer.iframeAuto(index) | 用於讓iframe層自適應。非常實用，如果是在iframe層內部，則可通過var index = layer.getFrameIndex (window.name)得到；若在父頁面，則可通過調用iframe層的返回值得到，如var index = $.layer(); 詳見官網實例演示之iframe子父操作。 |
| layer.setMove() | 當拖拽元素改變時，可用此方法重新初始化拖拽。 |
| layer.zIndex | 全局屬性，用於獲取layer容器中的最大z-index值 |
| layer.setTop(layerNow) | 引用此方法可開啟點擊使當前窗口置頂功能，只能用於用在success回調中，layerNow參數即為success回調函數中傳過來 的參數，即當前layer容器。type:1/type:2多窗口模式時可能非常實用，當需要時，需配置zIndex:layer.zIndex，可詳見 [實力加強版]一頁的例子：[頁面層]之無限層中層 |
| layer.path | 靜態屬性一枚，獲取當前layer的存放路徑。 |
| layer.use(module, callback) | 載入一個模塊，支持載入js、css，當你試圖給layer拓展個js模塊時，用它會更高大上不是么。如載入一個js：layer.use('extend/layer.ext.js', function(){}); 詳細參考layer.ext.js |
參數說明如下：
| 鍵: 值 | 描述 |
| 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 |
| fadeIn: 300, | （1.7.0重新新增，1.4.*貌似也有），用於層的漸顯，值為毫秒數 |
| move : ['.xubox_title' , true] | 通過拖拽層的某個元素來實現對層的拖拽。'.xubox_title'：拖拽綁定事件所在元素選擇器（默認為標題欄），true：是否允許拖拽（否：false） |
| moveOut : false | 用於控制層是否允許被拖出可視窗口外，false：不允許，true：允許 |
| moveType: 0 | （1.7.0新增）用於配置拖拽類型，默認為空心方塊式拖動層，若值設為1，則直接拖動層 |
| title : '信息' | 控制標題欄。不想顯示標題欄，配置title:false 即可 |
| offset : ['220px' , '50%'] | 控制層坐標。'220px'：縱坐標，'50%'：橫坐標。 需要注意的是，像素必須帶px單位，百分比不需要。該參數靈活運用，可助你實現諸多特效。 |
| area : ['310px' , 'auto'] | 控制層寬高。'310px'：寬，'auto'：高。 當設置為auto時，意味着采用自適應, 當然，對於寬度，並不推薦您這樣做。 |
| closeBtn : [0 , true] | 控制層右上角關閉按鈕。0：關閉按鈕風格（1：風格2），當標題欄不存在時，自動切換為風格2。 true：是否顯示關閉按鈕（否：false） |
| time : 0 | 自動關閉等待秒數，整數值。也許它可以助你做蠻多事，想象一下吧。 |
| bgcolor : '#fff' | 用於控制層的背景色，默認白色（#fff）,如設置透明，設置空字符即可。 |
| border : [10 , 0.3 , '#000', true] | 10：邊框大小，0.3：邊框透明度，'#000'：邊框顏色，true：是否顯示邊框（否：false）。通過它您可以任意配置邊框，譬如你覺得邊框礙眼，趕緊啟用[0,0,'',false]吧 |
| zIndex : 19891014 | 控制層堆疊順序（z-index）。整數值，默認是賢心的生日。合理設置它，可以避免與其它插件的層級沖突 |
| maxWidth : 400 | 最大寬度。整數值。當寬度設為auto時才有用。 |
dialog: {
btns : 1,
btn : ['確定', '取消'],
type : 3,
msg : '',
yes : function(index){ },
no : function(index){ }
}
|
信息框層模式提供的私有參數。使用時，按需配置即可 btns : 按鈕的個數。提供了0-2的選擇 btn : [按鈕一的文本值 , 按鈕二的文本值] type : 圖標類型，提供了0-15的選擇，也許有你喜歡的。 設置-1不顯示圖標（1.6.0） msg : 信息框內容，重要參數 yes : 按鈕一的回調函數 no : 按鈕二的回調函數 |
page: {
dom: '#xulayer',
html: '',
url: '',
ok: function(){}
}
|
頁面層模式私有參數。dom：需要彈出的html片段所對應的選擇器（class 或 id，推薦用id，確保唯一）。html: 自定義html字符串。url：ajax請求地址。ok，ajax請求完畢后執行的回調。需要注意的是，優先級 是：html>url>dom，這意味着，當你一旦配置了html的非空值，將優先采用html中的元素彈出，如此類推，若配置html或 url，你必須也配置寬高值。html參數為layer-v1.5.1開始新增。url和ok為1.6.0開始新增 |
iframe: {
src: 'http://sentsin.com'
}
|
iframe層模式私有參數。src：要打開的網址。使用率非常高，尤其是對於喜歡用iframe的同學。 |
| loading : {type : 0} | 加載層私有屬性。type：loading圖標類型（提供了0-3的選擇，試試吧，看看有無你喜歡的）。一般配合ajax使用 |
tips : {
msg: '',
follow: '',
guide: 0,
isGuide: true,
style: ['tips自定義樣式', '三角形顏色']
}
|
tips小提示層私有屬性。 msg：提示內容。 follow：觸發事件對應的選擇器。 guide：指引方向（0：上，1：右，2：下，3：左）。 isGuide：是否顯示默認三角形。 這個參數可配合msg幫助你自定義三角形icon [自定義樣式示例] style: ['background-color:#FFF8ED; color:#000; border:1px solid #FF9900', '#FF9900']]。 layer-v1.7.0開始，對tips有了更為完善的支持，提供了上、右、下、左模式，可智能識別指引方向。 |
| success : function(layer){} | 層彈出成功后的回調函數 |
| close : function(index){} | 層右上角關閉按鈕的回調函數。 |
| end : function(){} | 層被徹底關閉后執行的回調函數。它的存在讓close回調成為浮雲。 |
| moveEnd : function(){} | 拖拽時鼠標按鍵放下后的回調函數 |
標簽:
javascript,
jquery