Jquery 加载等待遮罩层插件

jQuery自定义Waitbar组件

最新推荐文章于 2021-05-30 23:51:46 发布

原创最新推荐文章于 2021-05-30 23:51:46 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#插件 #js #jquery

Web前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个基于jQuery实现的自定义Waitbar组件，该组件可在页面上显示加载遮罩并附带消息提示，同时提供了展示和隐藏遮罩的方法。通过简单的API调用即可轻松集成到现有项目中。

/**
* 弹出遮罩的waitbar
* loadMsg: 加载的消息字符串
* waitCls: waitbar的样式(可选参数)
*/
$.fn.showWaitbar = function(loadMsg, waitCls){
var wrap = $(this);
if(!waitCls) waitCls = "thick";
$("<div class=\""+waitCls+"\"></div>").css({
display: "block",
width: wrap.width(),
height: wrap.height()
}).appendTo(wrap);
$("<div class=\"thick-waitbar\"></div>").html(loadMsg).appendTo(wrap).css({
display: "block",
left: (wrap.width()-$("div.thick-waitbar", wrap).outerWidth())/2,
top: (wrap.height()-$("div.thick-waitbar", wrap).outerHeight())/2
});
};

/**
* 隐藏遮罩的waitbar
*/
$.fn.hideWaitbar = function(){
var wrap = $(this);
wrap.children("div.thick-waitbar").remove();
wrap.children("div.thick").remove();

};

/*** thick-waitbar样式 ***/
.thick{
position:absolute;
left:0;
top:0;
background:#ccc;
opacity:0.3;
filter:alpha(opacity=30);
display:none;
}
.thick-waitbar{
position:absolute;
cursor:wait;
left:100px;
top:50px;
width:auto;
height:16px;
padding:12px 5px 10px 30px;
background:#fff url('images/pagination_loading.gif') no-repeat scroll 5px 10px;
border:2px solid #6593CF;
font-size:12px;
color:#222;
display:none;
}