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

来源：互联网发布：log4j2.xml sql日志编辑：程序博客网时间：2024/05/16 14:01

弹出层layer的使用

Intro

layer是一款web弹层组件，致力于服务各个水平段的开发人员。layer官网：http://layer.layui.com/
layer侧重于用户灵活的自定义，为不同人的使用习惯提供动力。其意义在于，可以让您的页面拥有更丰富与便捷的操作体验，而您只需在调用时简单地配置相关参数，即可轻松实现。

layer.msg

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

       layer.msg('这里是msg内容');       layer.msg('这里是msg内容',{icon:1});       layer.msg('关闭后想做些什么', function(){           //do something       });       layer.msg('同上', {         icon: 1,         time: 2000 //2秒关闭（如果不配置，默认是3秒）       }, function(){         //do something       });

layer.alert

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

        //eg1        layer.alert('只想简单的提示');            //eg2        layer.alert('加了个图标', {icon: 1}); //这时如果你也还想执行yes回调，可以放在第三个参数中。        //eg3        layer.alert('有了回调', function(index){          //do something          layer.close(index);        });

layer.confirm

语法：layer.confirm(content[, options], yes[, cancel]) 询问框

        //eg1        layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){          //do something          layer.close(index);        });        //eg2        layer.confirm('is not?', function(index){          //do something          layer.close(index);        });

layer.propmt

语法：layer.prompt([options,] yes) 输入层/询问层

    //prompt层新定制的成员如下        {          formType: 1, //输入框类型，支持0（文本）默认1（密码）2（多行文本）          value: '', //初始时的值，默认空字符          maxlength: 140, //可输入文本的最大长度，默认500        }        //例子1        layer.prompt(function(value, index, elem){          alert(value); //得到value          layer.close(index);        });        //例子2        layer.prompt({          formType: 2,          value: '初始值',          title: '这里是title'        }, function(value, index, elem){          alert(value); //得到value          layer.close(index);        });

layer.open

语法：layer.open(options) 原始核心方法
基本上是露脸率最高的方法，不管是使用哪种方式创建层，都是走layer.open()，创建任何类型的弹层都会返回一个当前层索引，上述的options即是基础参数，另外，该文档统一采用options作为基础参数的标识

        //example1:        var index = layer.open({          content: 'test'        });        //拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。        //example2        layer.open({            type: 1 //Layer提供了5种层类型。可传入的值有：0（信息框，默认）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默认是不会自动关闭的，因为你一般会在ajax回调体中关闭它。

       //eg1       var index = layer.load();       //eg2       var index = layer.load(1); //换了种风格       //eg3       var index = layer.load(2, {time: 10*1000}); //又换了种风格，并且设定最长等待10秒        //关闭       layer.close(index);

layer.tab

语法：layer.tab(options) tab层

        layer.tab({          area: ['600px', '300px'],          tab: [{            title: 'TAB1',             content: '内容1'          }, {            title: 'TAB2',             content: '内容2'          }, {            title: 'TAB3',             content: '内容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('内容');            }            function func2() {                layer.alert('内容', {                    icon: 1,                    skin: 'layer-ext-moon'                 });            }            function func3() {                //询问框                layer.confirm('您是如何看待前端开发？', {                    btn: ['重要', '奇葩'] //按钮                }, function() {                    layer.msg('的确很重要', { icon: 1 });                }, function() {                    layer.msg('也可以这样', {                        time: 2000, //2s后自动关闭                        btn: ['明白了', '知道了']                    });                });            }            function func4() {                //提示层                layer.msg('玩命提示中');            }            function func5() {                //墨绿深蓝风                layer.alert('墨绿风格，点击确认看深蓝', {                    skin: 'layui-layer-molv' //样式类名                    ,                    closeBtn: 0                }, function() {                    layer.alert('偶吧深蓝style', {                        skin: 'layui-layer-lan',                        closeBtn: 0,                        shift: 4 //动画类型                    });                });            }            function func6() {                //捕获页                layer.open({                    type: 1,                    shade: false,                    title: false, //不显示标题                    content: $('.layer_notice'), //捕获的元素                    cancel: function(index) {                        layer.close(index);                        this.content.show();                        layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 2000, icon: 6 });                    }                });            }            function func7() {                //页面层                layer.open({                    type: 1,                    skin: 'layui-layer-rim', //加上边框                    area: ['420px', '240px'], //宽高                    content: 'html内容'                });            }            function func8() {                //自定页                layer.open({                    type: 1,                    skin: 'layui-layer-demo', //样式类名                    closeBtn: 0, //不显示关闭按钮                    shift: 2,                    area: ['420px', '240px'], //宽高                    shadeClose: true, //开启遮罩关闭                    content: '内容'                });            }            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, //不显示关闭按钮                    shade: [0],                    area: ['340px', '215px'],                    offset: 'auto', //右下角弹出                    time: 2000, //2秒后自动关闭                    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代表加载的风格，支持0-2            }            function func13() {                //loading层                var index = layer.load(1, {                    shade: [0.1, '#fff'] //0.1透明度的白色背景                });            }            function func14() {                //小tips                layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', $('#tips2'), {                    tips: [1, '#3595CC'],                    time: 4000                });            }            function func15() {                //prompt层                layer.prompt({                    title: '输入任何口令，并确认',                    formType: 1 //prompt风格，支持0-2                }, function(pass) {                    layer.prompt({ title: '随便写点啥，并确认', formType: 2 }, function(text) {                        layer.msg('演示完毕！您的口令：' + pass + ' 您最后写下了：' + text);                    });                });            }            function func16() {                //tab层                layer.tab({                    area: ['600px', '300px'],                    tab: [                        {                            title: 'TAB1',                            content: '内容1'                        }, {                            title: 'TAB2',                            content: '内容2'                        }, {                            title: 'TAB3',                            content: '内容3'                        }                    ]                });            }            function openpage() {                layer.config({                    extend: 'extend/layer.ext.js'                });                //页面一打开就执行，放入ready是为了layer所需配件（css、扩展模块）加载完毕                layer.ready(function() {                    //官网欢迎页                    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(); ">蓝色风格</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>

运行结果如图:

这里写图片描述

阅读全文

0 0