小編給大家分享一下layer中Icon樣式的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
公司主營業(yè)務(wù):網(wǎng)站設(shè)計、成都網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳,提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化,感謝他們對我們的高要求,感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn),讓我們激情的團(tuán)隊有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出晉源免費(fèi)做網(wǎng)站回饋大家。
一、layer的icon樣式
以上樣式測試代碼:
layer.confirm('icon測試', {icon: 1, title:'提示'}, function(index){ //do something alert("確認(rèn)"); layer.close(index); });
二、詢問框
官方案例:
//詢問框 layer.confirm('您是如何看待前端開發(fā)?', { btn: ['重要','奇葩'] //按鈕 }, function(){ layer.msg('的確很重要', {icon: 1}); }, function(){ layer.msg('也可以這樣', { time: 20000, //20s后自動關(guān)閉 btn: ['明白了', '知道了'] }); });
本人所用到,需要修改標(biāo)題,正如以上測試樣式時的代碼一樣,實(shí)現(xiàn)自定義標(biāo)題:
var message = "確定繼續(xù)?"; //詢問框 layer.confirm(message, {icon: 3, title:'信息提示'}, function(index){ //submitForm(); layer.close(index); });
三、提示層
官方案例:
//提示層 layer.msg('玩命提示中');
默認(rèn)關(guān)閉時間是3秒,效果如下(背景是官網(wǎng)的廣告,實(shí)際效果是黑色半透明):
自定義樣式以及時間,代碼如下:
layer.msg('操作成功!', {icon: 6, time: 2000});
icon樣式是6,關(guān)閉時間為2秒。效果如下:
四、彈框(自定義頁)
官方案例:
//自定頁 layer.open({ type: 1, skin: 'layui-layer-demo', //樣式類名 closeBtn: 0, //不顯示關(guān)閉按鈕 anim: 2, shadeClose: true, //開啟遮罩關(guān)閉 content: '內(nèi)容' });
效果如下:
本人使用案例,使用layer實(shí)現(xiàn)彈框登錄:
layer.open({ type: 2, title: '用戶登錄', maxmin: true, skin: 'layui-layer-lan', shadeClose: true, //點(diǎn)擊遮罩關(guān)閉層 area : ['400px' , '280px'], content:'login.html'//彈框顯示的url,對應(yīng)的頁面 });
其中‘login.html'是登錄頁面,其效果如下:
以上是“l(fā)ayer中Icon樣式的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!