busy-load是一款灵活的jquery loading遮罩层插件。它可以在加载的时候为容器添加一个遮罩层，并显示loading效果。loader可以是字体图标，图片，文字等，非常灵活方便。
使用方法
在页面中引入jquery和busy-load相关文件。
<
script
src
=
"http://code.jquery.com/jquery-3.2.1.min.js"
></
script
>
<
link
href
=
"https://cdn.jsdelivr.net/npm/busy-load/dist/app.min.css"
rel
=
"stylesheet"
>
<
script
src
=
"https://cdn.jsdelivr.net/npm/busy-load/dist/app.min.js"
></
script
>
|
初始化插件
然后你就可以在需要的容器上调用loadingi效果了。
// 显示loading
$(
"#some-element"
).busyLoad(
"show"
);
|
或者在调用时带上配置参数。
// 带配置参数
$(
"#another-element"
).busyLoad(
"show"
, {
background:
"#000"
,
spinner:
"cube"
,
animation:
"slide"
});
|
如果需要隐藏loading，只需要传入"hide"即可。
// 隐藏loading
$(
"#some-element"
).busyLoad(
"hide"
);
|
// 带配置参数
$(
"#another-element"
).busyLoad(
"hide"
, {
animation:
"fade"
});
|
配置参数
buzy-load插件的默认配置参数如下：
exports.
default
= {
spinner:
"pump"
,
// pump, accordion, pulsar, cube, cubes, circle-line, circles, cube-grid
image:
false
,
fontawesome:
false
,
// "fa fa-refresh fa-spin fa-2x fa-fw"
custom:
false
,
// jQuery Object
color:
"#fff"
,
background:
"rgba(0, 0, 0, 0.21)"
,
maxSize:
"50px"
,
// Integer/String only for spinners & images, not fontawesome & custom
minSize:
"20px"
,
// Integer/String only for spinners & images, not fontawesome & custom
text:
false
,
textColor:
false
,
// default is color
textMargin:
".5rem"
,
textPosition:
"right"
,
// left, right, top, bottom
fontSize:
"1rem"
,
fullScreen:
false
,
animation:
false
,
// fade, slide
animationDuration:
"fast"
,
// String, Integer
containerClass:
"busy-load-container"
,
containerItemClass:
"busy-load-container-item"
,
spinnerClass:
"busy-load-spinner"
,
textClass:
"busy-load-text"
};
|
busy-load jquery loading遮罩层插件的github网址为：https://github.com/piccard21/busy-load
本文版权属于jQuery之家，转载请注明出处：
http://www.htmleaf.com/jQuery/Layout-Interface/201711304855.html