gangdou

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

插件使用:

使用该loading加载插件首先要引入jQuery和waitMe.js和waitMe.css文件。

<link rel="stylesheet" href="css/waitMe.css">
<script src=\'js/jquery.js\'></script>                
<script src=\'js/waitMe.js\'></script>    

设置要显示的效果

function run_waitMe(effect){
    $(\'.content-wrapper > .content\').waitMe({
        effect: effect,//要显示的动画效果(String)。可用值有:\'bounce\'(默认值), none, rotateplane, stretch, orbit, roundBounce, win8, win8_linear, ios, facebook, rotation, timer, pulse, progressBar, bouncePulse, img
        text: \'数据加载中,请稍等...\',//loading效果下面的显示文本(String)
        bg: \'rgba(255,255,255,0.7)\',//容器的背景颜色(String)。如:\'rgba(255,255,255,0.7)\'。可以使用颜色和图片
        color:\'#000\',//loading和文本的颜色(String)
        sizeW:\'\',//改变loading动画元素的宽度(String)。例如:40px,默认为空字符串
        sizeH:\'\',//改变loading动画元素的高度(String)。例如:40px,默认为空字符串
        source: \'img.svg\'//图片的URL(String)。默认为空字符串。该属性和effect: \'img\'一起使用。
    });
}

在ajax中使用

$.ajax({
    beforeSend: function(){
        run_waitMe(\'roundBounce\');
    },
    complete:function(XHR, TS){
        $(\'.content-wrapper > .content\').waitMe("hide");
        return false;
    }
});

 

分类:

技术点:

相关文章: