炫酷简单的loading效果

来源:互联网 发布:linux查看组内用户 编辑:程序博客网 时间:2024/06/04 22:21

1、引入插件


<!-- loading效果插件 -->
<link type="text/css" rel="stylesheet" href="/static/widgets/waitme/waitMe.css">
<script type="text/javascript" src="/static/widgets/waitme/waitMe.js"></script>



2、使用插件

function uploadBrandDict() {
    var files = $("#file").val();
    if (files == null || files == "") {
        alert("请选择文件");
        return false;
    } else if (files.substr(files.length - 4, 4).toLowerCase().match("(^.csv)") == null) {
        alert("请选择.csv格式文件");
        return false;
    } else {
        if (confirm('确定上传?')) {   //关键在这里,这里是一个确定按钮,当然你可以换成任何你定义的按钮
            $("#inputForm1")[0].submit();
            $('#uploadDiv').dialog('close');
            //上传loading效果
            run_waitMe('progressBar');//progressBar,只是其中的一种效果,有多种效果可供选择
        }
    }
}

function run_waitMe(effect){
$('#page-content').waitMe({
effect: effect,
text: '正在上传,如果数据量比较大请耐心等待...',
bg: 'rgba(255,255,255,0.7)',
color:'#000',
sizeW:'',
sizeH:'',
source: ''
});
}


插件下载地址:http://www.htmleaf.com/jQuery/Layout-Interface/201505061788.html