layer.js
? 我們提到的基礎參數主要指調用方法時用到的配置項,如:layer.open({content: ''})layer.msg('', {time: 3})等,其中的content和time即是基礎參數,以鍵值形式存在,基礎參數可合理應用于任何層類型中,您不需要所有都去配置,大多數都是可選的。而其中的layer.open、layer.msg就是內置方法。注意,從2.3開始,無需通過layer.config來加載拓展模塊
(1)、type - 基本層類型
? 類型:Number,默認:0
? layer提供了5種層類型。可傳入的值有:0(信息框,默認)1(頁面層)2(iframe層)3(加載層)4(tips層)。若你采用layer.open({type: 1})方式調用,則type為必填項(信息框除外)
(2)、title - 標題? 類型:String/Array/Boolean,默認:'信息'
? title支持三種類型的值,若你傳入的是普通的字符串,如title :'我是標題',那么只會改變標題文本;若你還需要自定義標題區域樣式,那么你可以title: ['文本', 'font-size:18px;'],數組第二項可以寫任意css樣式;如果你不想顯示標題欄,你可以title: false
(3)、content - 內容
類型:String/DOM/Array,默認:''
content可傳入的值是靈活多變的,不僅可以傳入普通的html內容,還可以指定DOM,更可以隨著type的不同而不同。譬如:
/!*如果是頁面層*/ layer.open({type: 1, content: '傳入任意的文本或html' //這里content是一個普通的String }); layer.open({type: 1,content: $('#id') //這里content是一個DOM }); //Ajax獲取 $.post('url', {}, function(str){layer.open({type: 1,content: str //注意,如果str是object,那么需要字符拼接。}); }); /!*如果是iframe層*/ layer.open({type: 2, content: 'http://sentsin.com' //這里content是一個URL,如果你不想讓iframe出現滾動條,你還可以content: ['http://sentsin.com', 'no'] }); /!*如果是用layer.open執行tips層*/ layer.open({type: 4,content: ['內容', '#id'] //數組第二項即吸附元素選擇器或者DOM }); (4)、skin - 樣式類名
? 類型:String,默認:''
? skin不僅允許你傳入layer內置的樣式class名,還可以傳入您自定義的class名。這是一個很好的切入點,意味著你可以借助skin輕松完成不同的風格定制。目前layer內置的skin有:layui-layer-lan、layui-layer-molv,未來我們還會選擇性地內置更多,但更推薦您自己來定義。
(5)、area - 寬高
? 類型:String/Array,默認:'auto'
? 在默認狀態下,layer是寬高都自適應的,但當你只想定義寬度時,你可以area: '500px',高度仍然是自適應的。當你寬高都要定義時,你可以area: ['500px', '300px']
(6)、offset - 坐標
? 類型:String/Array,默認:垂直水平居中
? offset默認情況下不用設置。但如果你不想垂直水平居中,你還可以進行以下賦值:
(7)、icon - 圖標。信息框和加載層的私有參數
? 類型:Number,默認:-1(信息框)/0(加載層)
? 信息框默認不顯示圖標。當你想顯示圖標時,默認皮膚可以傳入0-6,如果是加載層,可以傳入0-2。
(8)、btn - 按鈕
? 類型:String/Array,默認:'確認'
? 信息框模式時,btn默認是一個確認按鈕,其它層類型則默認不顯示,加載層和tips層則無效。當您只想自定義一個按鈕時,你可以btn: '我知道了',當你要定義兩個按鈕時,你可以btn: ['yes', 'no']。當然,你也可以定義更多按鈕,比如:btn: ['按鈕1', '按鈕2', '按鈕3', …],按鈕1和按鈕2的回調分別是yes和cancel,而從按鈕3開始,則回調為btn3: function(){},以此類推。
(9)、btnAlign - 按鈕排列
? 類型:String,默認:r
? 你可以快捷定義按鈕的排列位置,btnAlign的默認值為r,即右對齊。btnAlign: 'l',按鈕左對齊;btnAlign: 'c',按鈕居中對齊。
(10)、closeBtn - 關閉按鈕
? 類型:String/Boolean,默認:1
? layer提供了兩種風格的關閉按鈕,可通過配置1和2來展示,如果不顯示,則closeBtn: 0
(11)、shade - 遮罩
? 類型:String/Array/Boolean,默認:0.3
? 即彈層外區域。默認是0.3透明度的黑色背景('#000')。如果你想定義別的顏色,可以shade: [0.8, '#393D49'];如果你不想顯示遮罩,可以shade: 0
(12)shadeClose - 是否點擊遮罩關閉
? 類型:Boolean,默認:false
? 如果你的shade是存在的,那么你可以設定shadeClose來控制點擊彈層外區域關閉。
(13)、time - 自動關閉所需毫秒
? 類型:Number,默認:0
? 默認不會自動關閉。當你想自動關閉時,可以time: 5000,即代表5秒后自動關閉,注意單位是毫秒(1秒=1000毫秒)
(14)、id - 用于控制彈層唯一標識
? 類型:String,默認:空字符
? 設置該值后,不管是什么類型的層,都只允許同時彈出一個。一般用于頁面層和iframe層模式
(15)anim - 動畫
? 類型:Number,默認:0
? 我們的出場動畫全部采用CSS3。這意味著除了ie6-9,其它所有瀏覽器都是支持的。目前anim可支持的動畫類型有0-6 ,(請注意,3.0之前的版本用的 shift 參數)
(16)maxmin - 最大最小化。
? 類型:Boolean,默認:false
? 該參數值對type:1和type:2有效。默認不顯示最大小化按鈕。需要顯示配置maxmin: true即可
(17)fixed - 固定
? 類型:Boolean,默認:true
? 即鼠標滾動時,層是否固定在可視區域。如果不想,設置fixed: false即可
(18)、resize - 是否允許拉伸
? 類型:Boolean,默認:true
? 默認情況下,你可以在彈層右下角拖動來拉伸尺寸。如果對指定的彈層屏蔽該功能,設置 false即可。該參數對loading、tips層無效
(19)、scrollbar - 是否允許瀏覽器出現滾動條
? 類型:Boolean,默認:true
? 默認允許瀏覽器滾動,如果設定scrollbar: false,則屏蔽
(20)、maxWidth - 最大寬度
? 類型:,默認:360
? 請注意:只有當area: 'auto'時,maxWidth的設定才有效。
(21)、zIndex - 層疊順序
? 類型:,默認:19891014(賢心生日 0.0)
? 一般用于解決和其它組件的層疊沖突。
(22)、move - 觸發拖動的元素
? 類型:String/DOM/Boolean,默認:'.layui-layer-title'
? 默認是觸發標題區域拖拽。如果你想單獨定義,指向元素的選擇器或者DOM即可。如move: '.mine-move'。你還配置設定move: false來禁止拖拽
(23)、moveOut - 是否允許拖拽到窗口外
? 類型:Boolean,默認:false
? 默認只能在窗口內拖拽,如果你想讓拖到窗外,那么設定moveOut: true即可
(24)、moveEnd - 拖動完畢后的回調方法
? 類型:Function,默認:null
? 默認不會觸發moveEnd,如果你需要,設定moveEnd: function(){}即可。
(25)、tips - tips方向和顏色
? 類型:Number/Array,默認:2
? tips層的私有參數。支持上右下左四個方向,通過1-4進行方向設定。如tips: 3則表示在元素的下面出現。有時你還可能會定義一些顏色,可以設定tips: [1, '#c00']
(26)、tipsMore - 是否允許多個tips
? 類型:Boolean,默認:false
? 允許多個意味著不會銷毀之前的tips層。通過tipsMore: true開啟
(27)、success - 層彈出后的成功回調方法
? 類型:Function,默認:null
? 當你需要在層創建完畢時即執行一些語句,可以通過該回調。success會攜帶兩個參數,分別是當前層DOM當前層索引。
(28)、yes - 確定按鈕回調方法
? 類型:Function,默認:null
? 該回調攜帶兩個參數,分別為當前層索引、當前層DOM對象。
layer.open({content: '測試回調',yes: function(index, layero){//do somethinglayer.close(index); //如果設定了yes回調,需進行手工關閉} }); (29)、cancel - 右上角關閉按鈕觸發的回調
? 類型:Function,默認:null
? 該回調同樣只攜帶當前層索引一個參數,無需進行手工關閉。如果不想關閉,return false即可,
//只有當點擊confirm框的確定時,該層才會關閉 cancel: function(index){ if(confirm('確定要關閉么')){layer.close(index)}return false; } (30)、end - 層銷毀后觸發的回調
? 類型:Function,默認:null
? 無論是確認還是取消,只要層被銷毀了,end都會執行,不攜帶任何參數。
(31)、full/min/restore -分別代表最大化、最小化、還原 后觸發的回調
? 類型:Function,默認:null
? 攜帶一個參數,即當前層DOM
2、實例
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>layer-更懂你的web彈窗解決方案</title><script src="layer/jquery-1.10.2.min.js"></script><script src="layer/layer.js"></script><link rel="stylesheet" href="layer/skin/default/layer.css" /><style>div.conten{width: 100%;border: 2px solid #C9C5C5;margin-bottom: 10px;box-shadow: 5px 5px #CCCCCC;text-align: center;}button.bt{width: 100px;height: 40px;line-height: 40px;background-color:#2D93CA;border-radius: 10px;color:white;text-align: center;font-weight: bold;font-size: 15px;}.layer_notice{margin-bottom: 10px;text-align: center;width:200px;color: #999999;margin: 0px auto;}.layer-photos-demo{text-align: center;width:500px;color: #999999;margin: 0px auto;border: 2px solid #C9C5C5;margin-bottom: 10px;box-shadow: 5px 5px #CCCCCC;}body .demo-class .layui-layer-demo{background:#333;}</style> </head> <body> <div class="conten"><button οnclick="common(1)" class="bt">普通信息框</button><button οnclick="common(2)" class="bt">圖標</button><button οnclick="common(3)" class="bt">詢問框</button><button οnclick="common(4)" class="bt">提示層</button><button οnclick="common(5)" class="bt">墨綠深藍風</button> </div> <div class="conten"><button οnclick="common(6)" class="bt">捕獲頁</button><button οnclick="common(7)" class="bt">頁面層</button><button οnclick="common(8)" class="bt">自定頁</button><button οnclick="common(9)" class="bt" >tips層</button><button οnclick="common(10)" class="bt">iframe層</button> </div> <div class="conten"><button οnclick="common(11)" class="bt">iframe窗</button><button οnclick="common(12)" class="bt">加載層</button><button οnclick="common(13)" class="bt">loading層</button><button οnclick="common(14)" class="bt">小tips</button><button οnclick="common(15)" class="bt">prompt層</button> </div> <div class="conten"><button οnclick="common(16)" class="bt">tap層</button><button οnclick="common(17)" class="bt">相冊層</button> </div> <div class=" layer_notice">傲不可長,欲不可縱,樂不可極,志不可滿。</div> <div id="layer-photos-demo" class="layer-photos-demo"><img layer-pid="圖片id,可以不寫" layer-src="img/1.jpg" src="img/11.jpg" alt="圖片名"><img layer-pid="圖片id,可以不寫" layer-src="img/2.jpg" src="img/22.jpg" alt="圖片名"><img layer-pid="圖片id,可以不寫" layer-src="img/4.jpg" src="img/44.jpg" alt="圖片名"><img layer-pid="圖片id,可以不寫" layer-src="img/5.jpg" src="img/55.jpg" alt="圖片名"><img layer-pid="圖片id,可以不寫" layer-src="img/7.jpg" src="img/77.jpg" alt="圖片名"> </div> <script> function common(n){if(n==1){ //layer.alert(content, options, yes) - 普通信息框layer.alert('有了回調', {title:'提示'},function(index){layer.alert('加了個圖標', {icon: 1},function(index){layer.alert('只想簡單的提示',function(index){layer.close(index);//沒有close就需要手動關閉});});}); }else if(n==2){//圖標layer.alert('圖標0', {icon: 0},function(index){layer.alert('圖標'+index, {icon: 1},function(index){layer.alert('圖標'+index, {icon: 2},function(index){layer.alert('圖標'+index, {icon: 3},function(index){layer.alert('圖標'+index, {icon: 4},function(index){layer.alert('圖標'+index, {icon: 5},function(index){layer.alert('圖標'+index, {icon: 6},function(index){layer.close(index);})})})})})})})}else if(n==3){//layer.confirm(content, options, yes, cancel) - 詢問框layer.confirm('您是如何看待前端開發?', {btn: ['重要','奇葩'], //按鈕icon: 3, title:'提示'}, function(){layer.msg('的確很重要', {icon: 1});}, function(){layer.msg('也可以這樣', {time: 20000, //20s后自動關閉btn: ['明白了', '知道了']});});}else if(n==4){//layer.msg(content, options, end) - 提示框,3秒后自動消失layer.msg('玩命提示中',{icon: 1,time: 2000 //2秒關閉(如果不配置,默認是3秒)}, function(){layer.msg('呵呵');});}else if(n==5){//墨綠深藍風layer.alert('墨綠風格,點擊確認看深藍', {skin: 'layui-layer-molv', //樣式類名closeBtn: 0//layer提供了兩種風格的關閉按鈕}, function(){layer.alert('深藍style', {skin: 'layui-layer-lan',closeBtn: 0,//layer提供了兩種風格的關閉按鈕anim: 4 //動畫類型});});}else if(n==6){//捕獲頁layer.open({type: 1,shade: false,area: ['420px', '240px'], //寬高title: false, //不顯示標題content: $('.layer_notice'), //捕獲的元素cancel: function(){layer.msg('捕獲就是從頁面已經存在的元素上,包裹layer的結構', {time: 5000, icon:6});}});}else if(n==7){//頁面層layer.open({type: 1,skin: 'layui-layer-rim', //加上邊框area: ['420px', '240px'], //寬高content: 'html內容'});}else if(n==8){//自定頁layer.open({type: 1,skin: 'layui-layer-demo', //樣式類名closeBtn: 0, //不顯示關閉按鈕anim: 2,//anim可支持的動畫類型有0-6shadeClose: true, //開啟遮罩關閉content: '內容'});}else if(n==9){//tips層layer.tips('Hi,我是tips', '.layer_notice',{tips:2});}else if(n==10){//iframe層layer.open({type: 2,title: 'layer mobile頁',shadeClose: true,//是否點擊遮罩關閉shade:[0.8,'#393D49'],//遮罩area: ['380px', '90%'],content: 'http://blog.csdn.net/qq_27626333/article/details/53674829' //iframe的url}); }else if(n==11){//iframe窗layer.open({type: 2,title: false,closeBtn: 0, //不顯示關閉按鈕shade: [0],//不顯示遮罩area: ['340px', '215px'],offset: 'rb', //右下角彈出time: 2000, //2秒后自動關閉anim: 2,content: ['http://blog.csdn.net/qq_27626333/article/details/53674829', 'no'], //iframe的url,no代表不顯示滾動條end: function(){ //此處用于演示layer.open({type: 2,title: '很多時候,我們想最大化看,比如像這個頁面。',shadeClose: true,shade: false,maxmin: true, //開啟最大化最小化按鈕area: ['893px', '600px'],content: 'http://blog.csdn.net/qq_27626333/article/details/53674829'});}});}else if(n==12){//layer.load(icon, options) - 加載層var index = layer.load(2, {time: 10*1000}); //又換了種風格,并且設定最長等待10秒 //關閉//layer.close(index); }else if(n==13){//loading層var index = layer.load(1, {shade: [0.1,'#fff'],//0.1透明度的白色背景time:1000});}else if(n==14){//小tipslayer.tips('我是另外一個tips,只不過我長得跟之前那位稍有些不一樣。', '.layer_notice', {tips: [1, '#3595CC'],time: 4000});}else if(n==15){//layer.prompt(options, yes) - 輸入層//formType: 1, //輸入框類型,支持0(文本)默認1(密碼)2(多行文本)//value: '', //初始時的值,默認空字符//maxlength: 140, //可輸入文本的最大長度,默認500//yes攜帶value表單值、index索引、elem表單元素layer.prompt({title: '輸入任何口令,并確認', formType: 1}, function(pass, index){layer.close(index);layer.prompt({title: '隨便寫點啥,并確認', formType: 2}, function(text, index){layer.close(index);layer.msg('演示完畢!您的口令:'+ pass +'您最后寫下了:'+text);});});}else if(n==16){//layer.tab(options) - tab層layer.tab({area: ['600px', '300px'],tab: [{title: 'TAB1', content: '內容1'}, {title: 'TAB2', content: '內容2'}, {title: 'TAB3', content: '內容3'}]});}else if(n==17){//相冊層layer.photos({photos: '#layer-photos-demo',anim: 5 //0-6的選擇,指定彈出圖片動畫類型,默認隨機(請注意,3.0之前的版本用shift參數)}); } } </script> </body> </html>
總結
- 上一篇: layer的move要怎么用
- 下一篇: Windows7下chm文件打不开