| 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的選擇css btn : [按鈕一的文本值 , 按鈕二的文本值]html type : 圖標類型，提供了0-10的選擇，也許有你喜歡的。前端 msg : 信息框內容，重要參數web yes : 按鈕一的回調函數ajax no : 按鈕二的回調函數api |
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: [' 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() | 當拖拽元素改變時，可用此方法從新初始化拖拽。 |
自由轉載，轉載請註明： 轉載自WEB開發筆記 www.chhua.comdom
本文連接地址: layer彈出信息框API http://www.chhua.com/web-note4188ide