master

分支 (1)

管理

管理

master

notify
/
demo_layui.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.min.js"></script>
    <script src="notify.js"></script>
    <style>
    body {
        text-align: center;
        background: #fafcf1;
    }

    .msgBox {
        box-shadow: 0PX 10PX 30px 5PX rgba(0, 0, 0, 0.1);
        background: #fff;
        width: 1000px;

        margin: auto;
        padding: 50px;
        clear: both;
    }
    </style>

</head>

<body>
     <h1>演示</h1>
    <div class="msgBox" id="msgBox">
        <button id="info1">提示(带遮罩)</button>
        <button id="info2">提示</button>
        <button id="warning">警告</button>
        <button id="success">成功</button>
        <button id="error">错误</button>
        <button id="loading">加载</button>
        <button id="noclose">不显示关闭按钮</button>
        <button id="close">关闭时回调</button>
        <button id="destroyAll">关闭全部</button>
        <button id="topLeft">左上</button>
        <button id="topRight">右上</button>
        <button id="bottomLeft">左下</button>
        <button id="bottomCenter">中下</button>
        <button id="bottomRight">右下</button>
        <button id="vcenter">正中间</button>
        <p>
            <button id="pos">指定ID/CLASS为弹出位置</button>
            <button id="alert">警告框</button>
            <button id="confirm">确认框</button>
            <button id="progressBar">进度条</button>
            <div style="text-align: left;line-height: 26px;width:900px;margin: auto;padding-top:20px;">

                一、<b>调用方法：</b><p/>
                notify.info(msg[, function]);<p/>
                二、<b>例子：</b><p/>
                <pre>
                1、notify.info('消息内容');
                2、notify.info({
                    msg:"提示",
                    closable:true,
                    shadow:true,
                    duration:2000
                });
                3、notify.info('消息内容', function() { alert('关闭时回调'); });
                </pre>
                三、<b>方法说明：</b><p/>
                <table border="1" cellspacing="4" cellpadding="4" style="border-collapse:collapse;" width="100%">
                    <tr bgColor="#f5f5f5">
                        <th>API</th>
                        <th>描述</th>
                    </tr>
                    <tr>
                        <td>notify.info(msg[, function]);</td>
                        <td>信息</td>
                    </tr>
                    <tr>
                        <td>notify.warning(msg[, function]);</td>
                        <td>警告</td>
                    </tr>
                    <tr>
                        <td>notify.success(msg[, function]);</td>
                        <td>成功</td>
                    </tr>
                    <tr>
                        <td>notify.error(msg[, function]);</td>
                        <td>错误</td>
                    </tr>
                    <tr>
                        <td>notify.loading(msg[, function]);</td>
                        <td>加载</td>
                    </tr>
                    <tr>
                        <td>notify.alert(msg[, function]);</td>
                        <td>模态框</td>
                    </tr>
                    <tr>
                        <td>notify.confirm(msg[, function]);</td>
                        <td>确认框</td>
                    </tr>
                    <tr>
                        <td>notify.destroyAll();</td>
                        <td>关闭全部</td>
                    </tr>
                    <tr>
                        <td>notify.close(notifyId);</td>
                        <td>关闭指定弹层，需要为弹层指定返回的id</td>
                    </tr>
                </table>
                三、<b>参数说明：</b><p/>
                <table border="1" cellspacing="4" cellpadding="4" style="border-collapse:collapse;" width="100%">
                    <tr bgColor="#f5f5f5">
                        <th>属性名</th>
                        <th>描述</th>
                        <th>类型</th>
                        <th>默认值</th>
                    </tr>
                    <tr>
                        <td>elem</td>
                        <td>指定弹出区域</td>
                        <td> string </td>
                        <td> 默认body，可选ID|CLASS</td>
                    </tr>
                    <tr>
                        <td>msg</td>
                        <td> 消息内容</td>
                        <td> string </td>
                        <td> '' </td>
                    </tr>
                    <tr>
                        <td>closable</td>
                        <td> 是否显示关闭按钮</td>
                        <td> boolean </td>
                        <td> true </td>
                    </tr>
                    <tr>
                        <td>duration</td>
                        <td> 显示时间</td>
                        <td> number </td>
                        <td> 默认3000，为 0 时不自动关闭 </td>
                    </tr>
                    <tr>
                        <td>position</td>
                        <td>指定弹出位置</td>
                        <td> string </td>
                        <td> 默认topCenter，可选值：bottomRight|bottomLeft|topRight|topLeft|topCenter|bottomCenter|vcenter" </td>
                    </tr>
                </table>
            </div>
        </p>
    </div>
    <script>
    layui.use(['notify'], function() {
        var notify = layui.notify;
           var j = 1;
    document.getElementById("info1").onclick = function() {
        notify.info({
            msg:"提示",
            closable:true,
            shadow:true,
            duration:2000
        });
    };
    document.getElementById("info2").onclick = function() {
        notify.info("提示消息 " + j++);
    };

    document.getElementById("warning").onclick = function() {
        notify.warning("警告消息 " + j++);
    }
    document.getElementById("success").onclick = function() {
        notify.success("操作成功 " + j++);
    }
    document.getElementById("loading").onclick = function() {
        notify.loading("加载中,不会自动关闭 " + j++);
    }
    document.getElementById("error").onclick = function() {
        notify.error("操作失败 " + j++);
    }
    document.getElementById("noclose").onclick = function() {
        notify.error({
            msg: "不显示关闭按钮",
            closable: false
        });
    }
    document.getElementById("close").onclick = function() {
        notify.info("提示消息 " + j++, function() {
            alert("回调成功");
        });
    };
    document.getElementById("destroyAll").onclick = function() {
        notify.destroyAll();
        j = 1
    }
    document.getElementById("topLeft").onclick = function() {
        notify.info({
            msg:"左上",
            position:"topLeft"
        });
    }
    document.getElementById("topRight").onclick = function() {
        notify.info({
            msg:"右上",
            position:"topRight"
        });
    }
    document.getElementById("bottomLeft").onclick = function() {
        notify.info({
            msg:"左下",
            position:"bottomLeft"
        });
    }
    document.getElementById("bottomRight").onclick = function() {
        notify.info({
            msg:"右下",
            position:"bottomRight"
        });
    }
    document.getElementById("bottomCenter").onclick = function() {
        notify.info({
            msg:"中下",
            position:"bottomCenter"
        });
    }
    document.getElementById("vcenter").onclick = function() {
        notify.info({
            msg:"正中",
            position:"vcenter"
        });
    }
    document.getElementById("pos").onclick = function() {
        notify.success({
            msg:"指定位置提示消息",
            elem:"#msgBox",
            position:"bottomCenter"
        });
    }
    document.getElementById("alert").onclick = function() {
        notify.alert({
            msg:"请输入内容",
            shadow:true,
            position:"vcenter"
        });

    }
    document.getElementById("confirm").onclick = function() {
        notify.confirm({
            msg:"确定要删除么",
            shadow:true,
            position:"vcenter"
        },function() {
            alert("回调方法")
        });
    }
    document.getElementById("progressBar").onclick = function() {
        let progressId = notify.loading("图片上传中...");
        let i=1;
        let timer = setInterval(function() {
            progressId.value(i++);
           if(i>100) {
               clearInterval(timer);
               notify.alert({msg:"上传完成",position:"vcenter"},function(){
                    notify.close(progressId);
               })

           }
        }, 100);
    }
    })
    </script>
</body>

</html>