一个基于 JQuery 实现的遮罩层(mask)
发布时间:2018-08-19 02:44:02 所属栏目:传媒 来源:站长网
导读:用过ExtJs的可能知道在ExtJs中集成了很多的UI元素可以很方便我们的使用。其中有mask()和unmask()这两个方法,这两个方法在指定的元素上添加一个遮罩层和一个提示消息实现,增加客户体验。由于最近做项目的时候,发现有时为了使用这一两个方法需要引入一个比
用过ExtJs的可能知道在ExtJs中集成了很多的UI元素可以很方便我们的使用。其中有mask()和unmask()这两个方法,这两个方法在指定的元素上添加一个遮罩层和一个提示消息实现,增加客户体验。由于最近做项目的时候,发现有时为了使用这一两个方法需要引入一个比较“庞大”的Extjs进来,觉得有点不划算,于是自己用jquery实现了一个比较简单mask、unmask方法来实现该效果。大家知道jquery是一个优秀的javascript框架,不但体积小而且使用方便,我现在逐渐将系统中使用Extjs实现的代码或组建全部更换成Jquery来实现。好了不多说,上我的代码,这些代码是根据网上的一位朋友实现的documentMask基础上进行整改的。使使用上更加灵活方便了。 Copy to Clipboard![]() $.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"> </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(){ // 淡入淡出效果 liehuo.net $(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(); }); } }); })(); 下面是使用实例代码:
(编辑:晋中站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
站长推荐
热点阅读