JQueryマスク実装(mask)実装コード

ここにはmask()とunmask()の2つの方法があります.この2つの方法は、指定した要素にマスクレイヤとプロンプトメッセージ実装を追加し、お客様の体験を向上させます.最近のプロジェクトでは、この2つの方法を使うために「膨大」な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=$('
 
'); 
  
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=$('
'+msg+'
'); 
  
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(); 
  
}); 
  
} 
  
}); 
  
})(); 
  
 
 

次に、インスタンスコードを使用して参照します.
コード#コード#

 
  
 
  
 
  
 
  
 
  
 
  <br>(function(){ 
  <br>$.extend($.fn,{ 
  <br>mask: function(msg,maskDivClass){ 
  <br>this.unmask(); 
  <br>//    
  <br>var op = { 
  <br>opacity: 0.8, 
  <br>z: 10000, 
  <br>bgcolor: '#ccc' 
  <br>}; 
  <br>var original=$(document.body); 
  <br>var position={top:0,left:0}; 
  <br>if(this[0] && this[0]!==window.document){ 
  <br>original=this; 
  <br>position=original.position(); 
  <br>} 
  <br>//      Mask  ，       
  <br>var maskDiv=$('<div class="maskdivgen"> </div>'); 
  <br>maskDiv.appendTo(original); 
  <br>var maskWidth=original.outerWidth(); 
  <br>if(!maskWidth){ 
  <br>maskWidth=original.width(); 
  <br>} 
  <br>var maskHeight=original.outerHeight(); 
  <br>if(!maskHeight){ 
  <br>maskHeight=original.height(); 
  <br>} 
  <br>maskDiv.css({ 
  <br>position: 'absolute', 
  <br>top: position.top, 
  <br>left: position.left, 
  <br>'z-index': op.z, 
  <br>width: maskWidth, 
  <br>height:maskHeight, 
  <br>'background-color': op.bgcolor, 
  <br>opacity: 0 
  <br>}); 
  <br>if(maskDivClass){ 
  <br>maskDiv.addClass(maskDivClass); 
  <br>} 
  <br>if(msg){ 
  <br>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>'); 
  <br>msgDiv.appendTo(maskDiv); 
  <br>var widthspace=(maskDiv.width()-msgDiv.width()); 
  <br>var heightspace=(maskDiv.height()-msgDiv.height()); 
  <br>msgDiv.css({ 
  <br>cursor:'wait', 
  <br>top:(heightspace/2-2), 
  <br>left:(widthspace/2-2) 
  <br>}); 
  <br>} 
  <br>maskDiv.fadeIn('fast', function(){ 
  <br>//        
  <br>$(this).fadeTo('slow', op.opacity); 
  <br>}) 
  <br>return maskDiv; 
  <br>}, 
  <br>unmask: function(){ 
  <br>var original=$(document.body); 
  <br>if(this[0] && this[0]!==window.document){ 
  <br>original=$(this[0]); 
  <br>} 
  <br>original.find("> div.maskdivgen").fadeOut('slow',0,function(){ 
  <br>$(this).remove(); 
  <br>}); 
  <br>} 
  <br>}); 
  <br>})(); 
  <br> 
  
 
  
 
  
   
  
 
  
 
  
divマスク 
  
divマスクを じる 
  
すべてのマスク