自定义加载层

由于很多插件的价值层我都不是很喜欢这里我就自己弄了预估加载层出来用
自定义加载层这里我先用一个div装着然后再在div里面用绘图标签绘制加载层出来
这里绘图的话网上搜就可以了我这里就不说了

<div id="JZ" style="padding: 0;position:absolute;top:0;z-index:2;position:absolute;">
<canvas id="c" style="display: inline-block;width: 200px;
height: 150px;position:relative;top:260px;left:660px;"></canvas>
</div>

这里我给最外面的盒子设置了跟窗口一样的宽跟高为了结束不让加载层显示出来之后还可以点到按钮。

$(function () {
    sethw();
});
window.onresize = function () {
    sethw();
}
function sethw() {
    var height = window.innerHeight;
    var width = window.innerWidth;
    var JZ = document.getElementById("JZ");
    JZ.style.height = (height-1) + "px";
    JZ.style.width = width + "px";
}

外面的盒子就遮住了所有的内容只有加载层了。
这里我还写了如何去触发这个加载层，由于一开始加载层是不需要去调用的我吧这个div跟绘图标签给隐藏掉了。当需要调用的时候再用我写的函数给调用出来

<div id="JZ" style="padding: 0;position:absolute;top:0;zindex:2;position:absolute;display:none">
        <canvas id="c" style="display: inline-block;width: 200px;height: 150px;position:relative;top:260px;left:660px;display:none"></canvas>
</div>

然后接下来是我写的调用函数，我用的是最简单的显示跟隐藏盒子，这里首先获取到盒子与绘图标签的ID,然后再去改变他的样式就可以了。OpenC就是显示加载层，closeC就是隐藏加载层。

function openC() {
    var JZ = document.getElementById("JZ");
    var c = document.getElementById("c");
    JZ.style.display = "block";
    c.style.display = "block";
}
function closeC() {
    var JZ = document.getElementById("JZ");
    var c = document.getElementById("c");
    JZ.style.display = "none";
    c.style.display = "none";
}

当外面需要调用加载层的时候只需要把函数写进去就可以了。如下代码。
//验证登录

function SelectUser() {
            var UserNuber = $("#UserNuber").val();
            var password = $("#password").val();
            openC();//开启加载层
            $.post("/Main/SelectUser",
                {
                    UserNuber: UserNuber,
                    Password: password
                },
                function (returnJson) {
                    //关闭加载层
                    closeC();
                    if (returnJson.State == true) {
                        window.location.replace("/Main/Main");
                    }
                    else {
                        layer.alert(returnJson.Text, { icon: 0, title: "提示" });
                    }
                });
        }

以上便是自定义加载层的全部内容

猜你喜欢