當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

layer-v2.4弹层组件使用示例

發(fā)布時間：2023/12/20 编程问答 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 layer-v2.4弹层组件使用示例小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

彈出層layer的使用

Intro

layer是一款web彈層組件，致力于服務(wù)各個水平段的開發(fā)人員。layer官網(wǎng)：http://layer.layui.com/
layer側(cè)重于用戶靈活的自定義，為不同人的使用習(xí)慣提供動力。其意義在于，可以讓您的頁面擁有更豐富與便捷的操作體驗，而您只需在調(diào)用時簡單地配置相關(guān)參數(shù)，即可輕松實現(xiàn)。

layer.msg

語法：layer.msg(content[, options][, end]) 提示框

layer.msg('這里是msg內(nèi)容');layer.msg('這里是msg內(nèi)容',{icon:1});layer.msg('關(guān)閉后想做些什么', function(){//do something});layer.msg('同上', {icon: 1,time: 2000 //2秒關(guān)閉（如果不配置，默認(rèn)是3秒）}, function(){//do something});

layer.alert

語法：layer.alert(content[, options][, yes]) 普通信息框

//eg1layer.alert('只想簡單的提示'); //eg2layer.alert('加了個圖標(biāo)', {icon: 1}); //這時如果你也還想執(zhí)行yes回調(diào)，可以放在第三個參數(shù)中。//eg3layer.alert('有了回調(diào)', function(index){//do somethinglayer.close(index);});

layer.confirm

語法：layer.confirm(content[, options], yes[, cancel]) 詢問框

//eg1layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){//do somethinglayer.close(index);});//eg2layer.confirm('is not?', function(index){//do somethinglayer.close(index);});

layer.propmt

語法：layer.prompt([options,] yes) 輸入層/詢問層

//prompt層新定制的成員如下{formType: 1, //輸入框類型，支持0（文本）默認(rèn)1（密碼）2（多行文本）value: '', //初始時的值，默認(rèn)空字符maxlength: 140, //可輸入文本的最大長度，默認(rèn)500}//例子1layer.prompt(function(value, index, elem){alert(value); //得到valuelayer.close(index);});//例子2layer.prompt({formType: 2,value: '初始值',title: '這里是title'}, function(value, index, elem){alert(value); //得到valuelayer.close(index);});

layer.open

語法：layer.open(options) 原始核心方法
基本上是露臉率最高的方法，不管是使用哪種方式創(chuàng)建層，都是走layer.open()，創(chuàng)建任何類型的彈層都會返回一個當(dāng)前層索引，上述的options即是基礎(chǔ)參數(shù)，另外，該文檔統(tǒng)一采用options作為基礎(chǔ)參數(shù)的標(biāo)識

//example1:var index = layer.open({content: 'test'});//拿到的index是一個重要的憑據(jù)，它是諸如layer.close(index)等方法的必傳參數(shù)。//example2layer.open({type: 1 //Layer提供了5種層類型。可傳入的值有：0（信息框，默認(rèn)）1（頁面層）2（iframe層）3（加載層）4（tips層）,title: 'title here',area: ['390px', '330px'],shade: 0.4,content: $("#test") //支持獲取DOM元素,btn: ['yes', 'close'] //按鈕,scrollbar: false //屏蔽瀏覽器滾動條,yes: function(index){//layer.msg('yes');layer.close(index);showToast();},btn2: function(){//layer.alert('aaa',{title:'msg title'});layer.msg('bbb');//layer.closeAll();}});

layer.load

語法：layer.load(icon, options) 加載層
icon支持傳入0-2,如果是0，無需傳。另外特別注意一點：load默認(rèn)是不會自動關(guān)閉的，因為你一般會在ajax回調(diào)體中關(guān)閉它。

//eg1var index = layer.load();//eg2var index = layer.load(1); //換了種風(fēng)格//eg3var index = layer.load(2, {time: 10*1000}); //又換了種風(fēng)格，并且設(shè)定最長等待10秒 //關(guān)閉layer.close(index);

layer.tab

語法：layer.tab(options) tab層

layer.tab({area: ['600px', '300px'],tab: [{title: 'TAB1', content: '內(nèi)容1'}, {title: 'TAB2', content: '內(nèi)容2'}, {title: 'TAB3', content: '內(nèi)容3'}]});

demo.html

<!doctype html> <html><head><meta charset="utf-8"><title>layer-更懂你的web彈窗解決方案</title><script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><script src="layer/layer.js"></script><script src="layer/extend/layer.ext.js"></script></head><body><script>function func1() {layer.alert('內(nèi)容');}function func2() {layer.alert('內(nèi)容', {icon: 1,skin: 'layer-ext-moon' });}function func3() {//詢問框layer.confirm('您是如何看待前端開發(fā)？', {btn: ['重要', '奇葩'] //按鈕}, function() {layer.msg('的確很重要', { icon: 1 });}, function() {layer.msg('也可以這樣', {time: 2000, //2s后自動關(guān)閉btn: ['明白了', '知道了']});});}function func4() {//提示層layer.msg('玩命提示中');}function func5() {//墨綠深藍(lán)風(fēng)layer.alert('墨綠風(fēng)格，點擊確認(rèn)看深藍(lán)', {skin: 'layui-layer-molv' //樣式類名,closeBtn: 0}, function() {layer.alert('偶吧深藍(lán)style', {skin: 'layui-layer-lan',closeBtn: 0,shift: 4 //動畫類型});});}function func6() {//捕獲頁layer.open({type: 1,shade: false,title: false, //不顯示標(biāo)題content: $('.layer_notice'), //捕獲的元素cancel: function(index) {layer.close(index);this.content.show();layer.msg('捕獲就是從頁面已經(jīng)存在的元素上，包裹layer的結(jié)構(gòu)', { time: 2000, icon: 6 });}});}function func7() {//頁面層layer.open({type: 1,skin: 'layui-layer-rim', //加上邊框area: ['420px', '240px'], //寬高content: 'html內(nèi)容'});}function func8() {//自定頁layer.open({type: 1,skin: 'layui-layer-demo', //樣式類名closeBtn: 0, //不顯示關(guān)閉按鈕shift: 2,area: ['420px', '240px'], //寬高shadeClose: true, //開啟遮罩關(guān)閉content: '內(nèi)容'});}function func9() {//tips層layer.tips('Hi，我是tips', $("#tips"));}function func10() {//iframe層layer.open({type: 2,title: 'layer mobile頁',shadeClose: true,shade: 0.8,area: ['380px', '90%'],content: 'http://m.baidu.com' //iframe的url});}function func11() {//iframe窗layer.open({type: 2,title: false,closeBtn: 0, //不顯示關(guān)閉按鈕shade: [0],area: ['340px', '215px'],offset: 'auto', //右下角彈出time: 2000, //2秒后自動關(guān)閉shift: 2,content: ['test/guodu.html', 'no'], //iframe的url，no代表不顯示滾動條end: function() { //此處用于演示layer.open({type: 2,title: '百度一下，你就知道',shadeClose: true,shade: false,maxmin: true, //開啟最大化最小化按鈕area: ['1150px', '650px'],content: 'http://www.baidu.com'});}});}function func12() {//加載層var index = layer.load(0, { shade: false }); //0代表加載的風(fēng)格，支持0-2}function func13() {//loading層var index = layer.load(1, {shade: [0.1, '#fff'] //0.1透明度的白色背景});}function func14() {//小tipslayer.tips('我是另外一個tips，只不過我長得跟之前那位稍有些不一樣。', $('#tips2'), {tips: [1, '#3595CC'],time: 4000});}function func15() {//prompt層layer.prompt({title: '輸入任何口令，并確認(rèn)',formType: 1 //prompt風(fēng)格，支持0-2}, function(pass) {layer.prompt({ title: '隨便寫點啥，并確認(rèn)', formType: 2 }, function(text) {layer.msg('演示完畢！您的口令：' + pass + ' 您最后寫下了：' + text);});});}function func16() {//tab層layer.tab({area: ['600px', '300px'],tab: [{title: 'TAB1',content: '內(nèi)容1'}, {title: 'TAB2',content: '內(nèi)容2'}, {title: 'TAB3',content: '內(nèi)容3'}]});}function openpage() {layer.config({extend: 'extend/layer.ext.js'});//頁面一打開就執(zhí)行，放入ready是為了layer所需配件（css、擴展模塊）加載完畢layer.ready(function() {//官網(wǎng)歡迎頁layer.open({type: 2,skin: 'layui-layer-lan',title: 'layer彈層組件',fix: false,shadeClose: true,maxmin: true,area: ['1000px', '500px'],content: 'https://www.baidu.com'});layer.msg('歡迎使用layer');});}</script><div class="layer_notice">hello,i'm layer!</div><button id="tips">tips</button><button id="tips2">tips2</button><button id="func1" onclick=" func1(); ">初體驗</button><button id="func2" onclick=" func2(); ">皮膚</button><button id="func3" onclick=" func3(); ">詢問框</button><button id="func4" onclick=" func4(); ">提示層</button><button id="func5" onclick=" func5(); ">藍(lán)色風(fēng)格</button><button id="func6" onclick=" func6(); ">捕捉頁</button><button id="func7" onclick=" func7(); ">頁面層</button><button id="func8" onclick=" func8(); ">自定義</button><button id="func9" onclick=" func9(); ">tips層</button><button id="func10" onclick=" func10(); ">iframe層</button><button id="func11" onclick=" func11(); ">iframe窗</button><button id="func12" onclick=" func12(); ">加載層</button><button id="func13" onclick=" func13(); ">loading層</button><button id="func14" onclick=" func14(); ">小tips</button><button id="func15" onclick=" func15(); ">prompt層</button><button id="func16" onclick=" func16(); ">tab層</button><button id="openpage" onclick=" openpage(); ">openpage</button></body> </html>

運行結(jié)果如圖:

總結(jié)

以上是生活随笔為你收集整理的layer-v2.4弹层组件使用示例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：找不到该项目请确认该项目的位置_裕同拟
下一篇：曾国藩的正面和侧面