欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-31 13:29:14
...

弹出层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>

运行结果如图:

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


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


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


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


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