脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JQuery插件：遮罩+数据加载中。。。（特点：遮你想遮，罩你想罩），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 (function($){
$.fn.extend({
/**
* 打开遮罩，并显示一段文字。
* @param {String} msg [显示的文字]
* @param {String} imgsrc [图片的位置]
* @return {void}
*/
oPEnMask:function(msg, imgsrc){
// VAR loadDiv=$("body").find("._mask_loadDiv");
var loadDiv=this.find("._mask_loadDiv");
if(!loadDiv || !loadDiv[0]){ // add Mask
var loadDiv=$("<p class='_mask_loadDiv' style='posITion:absolute; z-index:99999; height:40px; background:#FFF; border:1px solid #ACE'></p>");
if(!imgsrc){ // 指定默认的图片
var scripts=document.getelementsbytagname("script");
for(var i=0; i<scripts.length; i++){
if(scripts[i].src.indexOf(";mask")!=-1){
var scriptSrc=scripts[i].src;
var uri=scriptSrc.substring(0,scriptSrc.lastIndexOf("/"));
imgsrc=uri+"/images/mask_loading.gif";
}
}
}
var contentDiv=$("<p class='_mask_content' style='position:relative;text-align:center;' >");
var fontsize=12;
//loadDiv的宽度= msg的宽度+img的宽度
var loadDiv_width=msg.length*fontsize+16+3;
contentDiv.css("width",loadDiv_width);
loadDiv.css("width",loadDiv_width);
if(imgsrc){
contentDiv.append("<img src='"+imgsrc+"' alt='"+msg+"' style='width:16px; height:16px'>")
.append("<span style='font-Size:"+fontsize+"px; margin-left:2px; vertical-align:text-top'>"+msg+"</span>");
}
this.append(loadDiv.append(contentDiv));
// $("body").append(loadDiv.append(contentDiv));
/*
loadDiv[0].style.top=this[0].offsetTop+(this[0].offsetHeight-loadDiv[0].offsetHeight)/2;
loadDiv[0].style.left=this[0].offsetLeft+(this[0].offsetWidth-loadDiv[0].offsetWidth)/2;
loadDiv[0].style.paddingTop=(loadDiv[0].offsetHeight-contentDiv[0].offsetHeight)/2;
*/
loadDiv.css("top",this[0].offsetTop+(this[0].offsetHeight-loadDiv[0].offsetHeight)/2);
loadDiv.css("left",this[0].offsetLeft+(this[0].offsetWidth-loadDiv[0].offsetWidth)/2);
loadDiv.css("padding-top",(loadDiv[0].offsetHeight-contentDiv[0].offsetHeight)/2);
}
loadDiv.css("z-index",99999).css("display","block");
return this;
},
cloSEMask:function(){
// var loadDiv=$("body").find("._mask_loadDiv");
var loadDiv=this.find("._mask_loadDiv");
if(loadDiv)
loadDiv.css("display","none").css("z-index",-99999);
return this;
}
});
})(jQuery);
/*
// 这个是遮罩层里信息展示框,这个会添加到 <body> 或者 target 元素中
<p class="_mask_loadDiv">
<p class="_mask_content">
<img src='imgsrc' alt='msg' >
<span>msg</span>
</p>
</p>
//这个是目标，要在它上显示遮罩层
<p id="target">
</p>
// 只需要下面的代码：
$("#target").openMask("数据加载中。。。");
// 隐藏对话框，只需要：
$("#target").closeMask();
*/
复制代码
因为涉及到的CSS并不多，就没有遵循HTML、JS、CSS分离的原则，而是将CSS都在这个JS 中写了。
测试页面代码：
<htML>
<head>
<script type="text/javascript" src="./jquery-mask/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="./jquery-mask/jquery.mask.js"></script>
<script type="text/javascript">
var helloDiv;
$(function(){
var tbl=$("#tableContent");
for(var i=0; i< 16;i++){
tbl.append('<tr><td width="25%">hello</td><td width="25%">world</td><td width="25%">jquery</td><td width="22%">mask</td></tr>');
}
helloDiv=$("#hello");
helloDiv.openMask('数据加载中。。。');
});
function openMask(){
helloDiv.openMask("数据加载中。。。。");
}
function closeMask(){
helloDiv.closeMask("数据加载中。。。。");
}
</script>
<body>
<p id="hello" style="width:300px; height:400px; background-color:#ACE;">
<table border="1" width="100%" id="tableContent">
</table>
</p>
<input value="open" type="button" onclick="openMask();"><br>
<input type="button" value="close" onclick="closeMask();">
</body>
</head>
</html>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-JQuery插件：遮罩+数据加载中。。。（特点：遮你想遮，罩你想罩）全部内容，希望文章能够帮你解决javascript代码实例教程-JQuery插件：遮罩+数据加载中。。。（特点：遮你想遮，罩你想罩）所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。