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