layer.js

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?}????

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • type - 基本層類型 類型:Number,默認:0layer提供了5種層類型。可傳入的值有:0(信息框,默認)...
    hopevow閱讀 16,848評論 5 2
  • 1. 先在html文件引入layer.js http://layer.layui.com/ 2. 看136-144...
    yuzhan550閱讀 4,946評論 0 1
  • 轉載:http://www.lxweimin.com/p/32fcadd12108 每個UIView有一個伙伴稱為l...
    F麥子閱讀 6,307評論 0 13
  • 每個UIView有一個伙伴稱為layer,一個CALayer。UIView實際上并沒有把自己畫到屏幕上;它繪制本身...
    shenzhenboy閱讀 3,155評論 0 17
  • 彈出層layer的使用 Intro layer是一款web彈層組件,致力于服務各個水平段的開發人員。layer官網...
    天天向上卡索閱讀 12,244評論 0 9