一个前端载入浮层的使用

这是一个模仿ios加载的前端浮层页面，好看，且好用。整理了一下使用方法。

引入文件

<link rel="stylesheet" href="thirdparty/loading/css/loadingOverlay.css">
<script src="thirdparty/loading/js/spin.min.js"></script>
<script src="thirdparty/loading/js/loadingOverlay.js"></script>

配置项

var opts = {
    lines : 13, // The number of lines to draw
    length : 11, // The length of each line
    width : 5, // The line thickness
    radius : 17, // The radius of the inner circle
    corners : 1, // Corner roundness (0..1)
    rotate : 0, // The rotation offset
    color : '#FFF', // #rgb or #rrggbb
    speed : 1, // Rounds per second
    trail : 60, // Afterglow percentage
    shadow : false, // Whether to render a shadow
    className : 'spinner', // The CSS class to assign to the spinner
    zIndex : 2e9, // The z-index (defaults to 2000000000)
    top : '300px', // Top position relative to parent in px
    left : '300px' // Left position relative to parent in px
};

显示的界面

function genLoadingDiv() {
    var target = document.createElement("div");
    document.body.appendChild(target);
    var spinner = new Spinner(opts).spin(target);
    return spinner;
}

生成浮层

function genOverlay(str){//str是要显示的文字
    return loadingOverlay({
        text : str,
        spinner : genLoadingDiv()
    });
}

加载完成后的回调函数

function respone(state, overlay) {
    switch (state) {
    case "success":
        overlay.update({
            icon : "./thirdparty/loading/img/check.png",
            text : "保存成功!"
        });
        break;
    case "networkerror":
        overlay.update({
            icon : "./thirdparty/loading/img/cross.png",
            text : "网络错误，连接失败！"
        });
        break;
    }
    //2秒后隐藏loading浮层
    window.setTimeout(function () {
        overlay.hide();
    }, 2e3);
}

调用方式

function f() {
    var overlay = genOverlay("保存中..."); //加载保存界面
    $.ajax({
        //...
        success : function (msg) {
            respone("successAndUse", overlay); //回调函数
        }
        //...
    })
}