Jquery 加载等待遮罩层插件

2024-04-27 15:11:02

字体：大中小

来源：转载

供稿：网友

/** * 弹出遮罩的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;}

上一篇：关于jquery easyui和bootstrap

下一篇：table表格合并封装的小插件