layer之jquery 弹窗插件 （最后版本v1.8.5）
生活随笔
收集整理的這篇文章主要介紹了
layer之jquery 弹窗插件 （最后版本v1.8.5）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
轉載自?jquery 彈窗插件 layer
jquery.layer版本（v1.8.5）下載地址
注意：v1.8.5后改版移除各種API，構造方法改版
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="layer.min.js"></script></head> <body><input type="button" class="testBtn" value="click me"> <script type="text/javascript">/*layer.alert('白菜級別前端攻城師賢心', 1);*//*layer.confirm('白菜級別前端攻城師賢心', 8);*//*layer.load('加載中……',4);*//*$.layer({shade : [0], //不顯示遮罩area : ['auto','auto'],dialog : {msg:'您是如何看待前端開發(fā)？',btns : 2, type : 4,btn : ['重要','奇葩'],yes : function(){//layer.msg('您選擇了重要。',2,1);layer.closeAll();},no : function(){layer.msg('奇葩!!!',2,4);}} });*/$('.testBtn').on('click',function(){layer.tips('tips的樣式并非是固定的，您可自定義外觀。', this, {style: ['background-color:#E227C7; color:#fff', '#E227C7'],maxWidth:185,closeBtn:[0,true] //顯示關閉按鈕});})</script> </body> </html>常見接口如下：
| 方法名 | 描述 |
| $.layer({}) | 核心接口，參數是一個對象，對象屬性參見上述列表。諸如layer.alert()之類的為$.layer()的包裝方法。 |
| layer.v | 獲取版本號。 |
| layer.ready(callback) | layer中的樣式文件裝載完畢后執(zhí)行的方法，一般用于頁面加載時調用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：觸發(fā)事件對應的選擇器，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 | 靜態(tài)屬性，用于獲取最近一次觸發(fā)的層索引值 |
| 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回調函數中傳過來 的參數，即當前l(fā)ayer容器。type:1/type:2多窗口模式時可能非常實用，當需要時，需配置zIndex:layer.zIndex，可詳見[實力加強版]一頁的例子：[頁面層]之無限層中層 |
| layer.path | 靜態(tài)屬性一枚，獲取當前l(fā)ayer的存放路徑。 |
| 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 | 用來控制點擊遮罩區(qū)域是否關閉層。(是：true)。 |
| fix : true, | 層是否固定在可視區(qū)域。否：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請求完畢后執(zhí)行的回調。需要注意的是，優(yōu)先級是：html>url>dom，這意味著，當你一旦配置了html的非空值，將優(yōu)先采用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：觸發(fā)事件對應的選擇器。? 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(){} | 層被徹底關閉后執(zhí)行的回調函數。它的存在讓close回調成為浮云。 |
| moveEnd : function(){} | 拖拽時鼠標按鍵放下后的回調函數 |
總結
以上是生活随笔為你收集整理的layer之jquery 弹窗插件 （最后版本v1.8.5）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 雷克沙推出新款 CFexpress Ty
- 下一篇： 印小天事件是什么 印小天事件简述