ayer至今仍作為layui的代表作,她的受眾廣泛並非偶然,而是這五年多的堅持,不斷完善和維護、不斷建設和提升社區服務,使得猿們紛紛自發傳播,乃至於成為今天的Layui最強勁的源動力。目前,layer已成為國內最多人使用的web彈層組件,GitHub自然Stars3000+,官網累計下載量達30w+,大概有20萬Web平台正在使用layer。
在貼出代碼
1 layer.alert('見到你真的很高興', {icon: 6});
這是一個最簡單的彈出層,可根據icon配置左邊的圖標
通常情況下,除了彈窗之外我們一般都會有對按鈕做回調處理的一些操作
如圖:
1 layer.alert('墨綠風格,點擊確認看深藍', { 2 skin: 'layui-layer-molv' //樣式類名 自定義樣式 3 ,closeBtn: 1 // 是否顯示關閉按鈕 4 ,anim: 1 //動畫類型 5 ,btn: ['重要','奇葩'] //按鈕 6 ,icon: 6 // icon 7 ,yes:function(){ 8 layer.msg('按鈕1') 9 } 10 ,btn2:function(){ 11 layer.msg('按鈕2') 12 }}); 13
看下效果圖1.
code:
1 layer.msg('大部分參數都是可以公用的<br>合理搭配,展示不一樣的風格', { 2 time: 2000, //2s后自動關閉 3 btn: ['明白了', '知道了', '哦'] 4 });
回調的例子:
code:
1 layer.msg('也可以這樣', { 2 btn: ['明白了', '知道了'] 3 ,yes: function(index, layero){ 4 layer.msg("按鈕1回調,參數是:"+index) 5 } 6 ,btn2: function(index, layero){ 7 //按鈕【按鈕二】的回調 8 layer.msg("按鈕2回調,參數是:"+index) 9 return false //開啟該代碼可禁止點擊該按鈕關閉 10 } 11 });
open方式
code
1 layer.open({ 2 type: 1 3 ,title: "open方式彈出層" //不顯示標題欄 title : false/標題 4 ,closeBtn: true 5 ,area: '300px;' 6 ,shade: 0.8 7 ,id: 'LAY_layuipro' //設定一個id,防止重復彈出 8 ,resize: false 9 ,btn: ['火速圍觀', '殘忍拒絕'] 10 ,btnAlign: 'c' 11 ,moveType: 1 //拖拽模式,0或者1 12 ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">內容<br>內容</div>' 13 ,success: function(layero){ 14 var btn = layero.find('.layui-layer-btn'); 15 btn.find('.layui-layer-btn0').attr({ 16 href: 'http://www.layui.com/' 17 ,target: '_blank' 18 }); 19 } 20 });