随笔- 19  评论- 30  文章- 0 

发布个JQuery的遮罩层实现(mask)

用过ExtJs的可能知道在ExtJs中集成了很多的UI元素可以很方便我们的使用。其中有mask()和unmask()这两个方法,这两个方法在指定的元素上添加一个遮罩层和一个提示消息实现,增加客户体验。由于最近做项目的时候,发现有时为了使用这一两个方法需要引入一个比较“庞大”的Extjs进来,觉得有点不划算,于是自己用jquery实现了一个比较简单mask、unmask方法来实现该效果。大家知道jquery是一个优秀的javascript框架,不但体积小而且使用方便,我现在逐渐将系统中使用Extjs实现的代码或组建全部更换成Jquery来实现。好了不多说,上我的代码,这些代码是根据网上的一位朋友实现的documentMask基础上进行整改的。使使用上更加灵活方便了。

 (没什么技术含量,旨在为那些需要的朋友提供帮助)

(function(){
        $.extend($.fn,{
            mask: 
function(msg,maskDivClass){
                
this.unmask();
                
// 参数
                var op = {
                    opacity: 
0.8,
                    z: 
10000,
                    bgcolor: 
'#ccc'
                };
                
var original=$(document.body);
                
var position={top:0,left:0};
                            
if(this[0&& this[0]!==window.document){
                                original
=this;
                                position
=original.position();
                            }
                
// 创建一个 Mask 层,追加到对象中
                var maskDiv=$('<div class="maskdivgen">&nbsp;</div>');
                maskDiv.appendTo(original);
                
var maskWidth=original.outerWidth();
                
if(!maskWidth){
                    maskWidth
=original.width();
                }
                
var maskHeight=original.outerHeight();
                
if(!maskHeight){
                    maskHeight
=original.height();
                }
                maskDiv.css({
                    position: 
'absolute',
                    top: position.top,
                    left: position.left,
                    
'z-index': op.z,
                  width: maskWidth,
                    height:maskHeight,
                    
'background-color': op.bgcolor,
                    opacity: 
0
                });
                
if(maskDivClass){
                    maskDiv.addClass(maskDivClass);
                }
                
if(msg){
                    
var msgDiv=$('<div style="position:absolute;border:#6593cf 1px solid; padding:2px;background:#ccca"><div style="line-height:24px;border:#a3bad9 1px solid;background:white;padding:2px 10px 2px 10px">'+msg+'</div></div>');
                    msgDiv.appendTo(maskDiv);
                    
var widthspace=(maskDiv.width()-msgDiv.width());
                    
var heightspace=(maskDiv.height()-msgDiv.height());
                    msgDiv.css({
                                cursor:
'wait',
                                top:(heightspace
/2-2),
                                left:(widthspace/2-2)
                      });
                  }
                  maskDiv.fadeIn(
'fast'function(){
                    
// 淡入淡出效果
                    $(this).fadeTo('slow', op.opacity);
                })
                
return maskDiv;
            },
         unmask: 
function(){
                     
var original=$(document.body);
                         
if(this[0&& this[0]!==window.document){
                            original
=$(this[0]);
                      }
                      original.find(
"> div.maskdivgen").fadeOut('slow',0,function(){
                          $(
this).remove();
                      });
            }
        });
    })();

 

 

下面是使用实例代码可供参考

 

代码
<html>
    
<head>
        
<style>
            body{
                font
-size:12px;
            }    
        
</style>
        <script src="jquery-1.3.2.js" type="text/javascript"></script>
        <script type="text/javascript">
            (
function(){
        $.extend($.fn,{
            mask: 
function(msg,maskDivClass){
                
this.unmask();
                
// 参数
                var op = {
                    opacity: 
0.8,
                    z: 
10000,
                    bgcolor: 
'#ccc'
                };
                
var original=$(document.body);
                
var position={top:0,left:0};
                            
if(this[0&& this[0]!==window.document){
                                original
=this;
                                position
=original.position();
                            }
                
// 创建一个 Mask 层,追加到对象中
                var maskDiv=$('<div class="maskdivgen">&nbsp;</div>');
                maskDiv.appendTo(original);
                
var maskWidth=original.outerWidth();
                
if(!maskWidth){
                    maskWidth
=original.width();
                }
                
var maskHeight=original.outerHeight();
                
if(!maskHeight){
                    maskHeight
=original.height();
                }
                maskDiv.css({
                    position: 
'absolute',
                    top: position.top,
                    left: position.left,
                    
'z-index': op.z,
                  width: maskWidth,
                    height:maskHeight,
                    
'background-color': op.bgcolor,
                    opacity: 
0
                });
                
if(maskDivClass){
                    maskDiv.addClass(maskDivClass);
                }
                
if(msg){
                    
var msgDiv=$('<div style="position:absolute;border:#6593cf 1px solid; padding:2px;background:#ccca"><div style="line-height:24px;border:#a3bad9 1px solid;background:white;padding:2px 10px 2px 10px">'+msg+'</div></div>');
                    msgDiv.appendTo(maskDiv);
                    
var widthspace=(maskDiv.width()-msgDiv.width());
                    
var heightspace=(maskDiv.height()-msgDiv.height());
                    msgDiv.css({
                                cursor:
'wait',
                                top:(heightspace
/2-2),
                                left:(widthspace/2-2)
                      });
                  }
                  maskDiv.fadeIn(
'fast'function(){
                    
// 淡入淡出效果
                    $(this).fadeTo('slow', op.opacity);
                })
                
return maskDiv;
            },
         unmask: 
function(){
                     
var original=$(document.body);
                         
if(this[0&& this[0]!==window.document){
                            original
=$(this[0]);
                      }
                      original.find(
"> div.maskdivgen").fadeOut('slow',0,function(){
                          $(
this).remove();
                      });
            }
        });
    })();
        
</script>
    </head>
    <body style="width:100%">
        
        测试
    
<div id="test" style="width:200px;height:100px; border:black 1px solid;">
    
</div>
    <a href="#" onclick="$('#test').mask('DIV层遮罩')">div遮罩</a>
    <a href="#" onclick="$('#test').unmask()">关闭div遮罩</a>
    <a href="#" onclick="$(document).mask('全屏遮罩').click(function(){$(document).unmask()})">全部遮罩</a>
    </body>
</html>

 

 

posted on 2010-01-09 15:05  侯德军  阅读(...)  评论(...编辑  收藏