master

分支 (1)

标签 (15)

管理

管理

master

2.9.18

2.9.12

2.9.11

2.9.7

2.9.1

2.9.0

2.8.18

2.8.16

2.8.15

2.8.14

2.8.12

2.8.8

2.8.4

2.8.3

3.6.0

Layer
/
index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layer 弹层 - layui</title>
    <style>
        body {
            padding: 100px;
        }

        #photos li {
            float: left;
            margin: 0 1px 1px;
        }

        #photos img {
            max-height: 38px;
        }
    </style>
</head>

<body>
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-primary" lay-on="test">Alert</button>
        <button class="layui-btn" lay-on="test2">Confirm</button>
        <button class="layui-btn" lay-on="test3">Msg</button>
        <button class="layui-btn" lay-on="test5">Page</button>
        <button class="layui-btn" lay-on="test6">Iframe</button>
        <button class="layui-btn" lay-on="testLoading">Loading</button>
        <button class="layui-btn" lay-on="test4">Tips</button>
        <button class="layui-btn" lay-on="test7">Prompt</button>
        <button class="layui-btn" lay-on="test8">Tab</button>
        <button class="layui-btn" lay-on="test9">Photo</button>
        <button class="layui-btn" lay-on="testTime">自动关闭</button>
    </div>
    <div id="test11111" style="display: none; padding: 20px;">
        content 指向放置在页面的一段隐藏元素
    </div>
    <hr><br>
    <div class="layui-list">
        <ul class="layui-row" id="photos">
            <li class="list"><img src="https://unpkg.com/outeres/demo/1.jpg" alt="图片ALT信息"></li>
            <li class="list"><img src="https://unpkg.com/outeres/demo/2.jpg"></li>
        </ul>
    </div>
    <script>
        var LAYUI_GLOBAL = {
            //path: '../src/'
            //,layerPath: '../release/layer/src/'
        };
    </script>
    <script src="//cdn.staticfile.org/jquery/1.12.3/jquery.min.js"></script>
    <script src="layer.js"></script>
    <script>
        var index = layer.msg('Hello World'),
            clickFunc = {
                test: function () {
                    var icon = -1;
                    (function changeIcon() {
                        var index = layer.alert('Hi，你好！ 点击确认更换图标', {
                            icon: icon,
                            shadeClose: true,
                            title: icon === -1 ? 'Alert' : ('icon: ' + icon)
                        }, changeIcon);
                        if (icon++ > 6) {
                            layer.close(index);
                            icon = -1;
                        }
                    }());
                }
                , test2: function () {
                    layer.confirm('一个询问层的测试示例？', {
                        btn: ['确定', '关闭'] //按钮
                    }, function () {
                        layer.msg('第一个回调', {icon: 1});
                    }, function () {
                        layer.msg('第二个回调', {
                            time: 20000, //20s后自动关闭
                            btn: ['明白了', '知道了']
                        });
                    });
                }
                , test3: function () {
                    !0 ? layer.msg('一个常用消息框')
                        : layer.msg('一个常用消息框', {closeBtn: 0, time: 0, icon: 16});
                }
                , test4: function (_this) {
                    layer.tips('Hi，我是一个小提示', _this, {tips: 1});
                }
                , test5: function () {
                    layer.open({
                        title: '自定义页面层',
                        type: 1,
                        skin: 'layui-layer-border',
                        area: ['1000px', '580px'],
                        content: $('#test11111'),
                        maxmin: true,
                        shade: false,
                        minStack: false, // 最小化不堆叠在左下角
                        id: 'page-1', // 定义 ID，防止重复弹出
                        min: function (layero, index) {
                            layer.msg('阻止了默认的最小化');
                            layer.style(index, {top: 'auto', bottom: 0});
                            return false;
                        }
                    });
                }
                , test6: function () {
                    layer.open({
                        type: 2,
                        content: 'https://www.aliyun.com/activity?userCode=ap0255is',
                        area: ['375px', '500px'],
                        id: 'iframe-1',
                        hideOnClose: true, // 关闭时是否隐藏弹层容器，下次打开时直接显示原来的弹层
                        maxmin: true
                    });
                }
                , testLoading: function () {
                    layer.load(1, {
                        time: 5 * 1000
                    });
                }
                , test7: function () {
                    layer.prompt({title: '输入任何口令，并确认', formType: 1}, function (pass, index) {
                        layer.close(index);
                        layer.prompt({title: '随便写点啥，并确认', formType: 2}, function (text, index) {
                            layer.close(index);
                            layer.msg('演示完毕！您的口令：' + pass + '<br>您最后写下了：' + text);
                        });
                    });
                }
                , test8: function () {
                    layer.tab({
                        area: ['600px', '300px'],
                        tab: [{
                            title: 'TAB1',
                            content: '内容1'
                        }, {
                            title: 'TAB2',
                            content: '内容2'
                        }, {
                            title: 'TAB3',
                            content: '内容3'
                        }]
                    });
                }
                , test9: function () {
                    layer.photos({
                        photos: {
                            "data": [{
                                "src": "https://unpkg.com/outeres/demo/layer.png"
                            }]
                        },
                        hideFooter: true
                    });
                }
                , testTime: function () {
                    layer.alert('你好么，体验者。<br>在标题栏显示自动关闭倒计秒数', {
                        time: 5 * 1000
                        , success: function (layero, index) {
                            var timeNum = this.time / 1000, setText = function (start) {
                                layer.title((start ? timeNum : --timeNum) + ' 秒后关闭', index);
                            };
                            setText(!0);
                            this.timer = setInterval(setText, 1000);
                            if (timeNum <= 0) clearInterval(this.timer);
                        }
                        , end: function () {
                            clearInterval(this.timer);
                        }
                    });
                }
            };
        $(".layui-btn").on("click", function () {
            var clickon = $(this).attr("lay-on");
            clickFunc[clickon](this);
        });
        layer.photos({
            photos: '#photos', // $('#photos')
            // toolbar: false,
            // footer: false
        });
        $('#photos').append('<li class="list"><img src="https://unpkg.com/outeres/demo/3.jpg"></li>');
    </script>
</body>

</html>