IE6有个bug,不论如何设div的z-index, IE6的select总会显示在最前,我们都无法使用DIV遮挡住select元素。
今天写了个类,解决了这个问题,先贴上代码,然后写如何使用:
namespace:
if (typeof(rdcjs) == "undefined")
_rdc = rdcjs = {};
IE6SelectHelper class:
_rdc.IE6SelectHelper = function(){
this.selectList = new Array();
}
_rdc.IE6SelectHelper.prototype = {
isInRange : function( elem, containerId ){
//alert(this.idAs);
var containerDiv = document.getElementById( containerId );
if( !containerDiv )
return false;
//as_asName_txtSuggestBoxasName
var elemX1 = this.getX( elem );
var elemY1 = this.getY( elem );
var elemX2 = elem.offsetWidth + elemX1;
var elemY2 = elem.offsetHeight + elemY1;
var containerX1 = this.getX( containerDiv );
var containerY1 = this.getY( containerDiv);
var containerX2 = containerDiv.offsetWidth + containerX1;
var containerY2 = containerDiv.offsetHeight + containerY1;
if( elemX1 < containerX1 && elemX2 < containerX1 )
return false;
if( elemX1 > containerX2 && elemX2 > containerX2 )
return false;
if( elemY1 < containerY1 && elemY2 < containerY1 )
return false;
//alert( "elemY1: " + elemY1 + "elemY2: " + elemY2 + "containerY2:" + containerY2 );
if( elemY1 > containerY2 && elemY2 > containerY2 )
return false;
//alert(6);
return true;
}
,
hideSelect : function( containerId ){
if ( this.msieversion() <= 6 && document.all ){
var selects = document.getElementsByTagName("select");
for( var i = 0; i < selects.length; i++ ){
var oneSelect = selects[i];
if( !this.isInRange( oneSelect, containerId ) )
continue;
if( oneSelect.style.visibility != "hidden" ){
oneSelect.style.visibility = "hidden";
this.selectList.push( oneSelect );
}
}
/*
alert("show! "
+ "clientWidth:" + this.fld.clientWidth
+ " clientHeight:"+ this.fld.clientHeight
+ " offsetWidth:" + this.fld.offsetWidth
+ " offsetHeight:" + this.fld.offsetHeight
+ " curLeft:" + getX( this.fld )
+ " curTop:" + getY( this.fld )
);*/
}
}
,
showSelect : function(){
for( var i = 0; i < this.selectList.length; i++ )
this.selectList[i].style.visibility = "visible";
while( this.selectList.length > 0 )
this.selectList.pop();
}
,
getX : function( oElement )
{
var iReturnValue = 0;
while( oElement != null ) {
iReturnValue += oElement.offsetLeft;
oElement = oElement.offsetParent;
}
return iReturnValue;
}
,
getY : function( oElement )
{
var iReturnValue = 0;
while( oElement != null ) {
iReturnValue += oElement.offsetTop;
oElement = oElement.offsetParent;
}
return iReturnValue;
}
,
msieversion : function()
{
var ua = window.navigator.userAgent
var msie = ua.indexOf ( "MSIE " )
if ( msie > 0 ) // If Internet Explorer, return version number
return parseInt (ua.substring (msie+5, ua.indexOf (".", msie )))
else // If another browser, return 0
return 0
}
}
如何使用:
非常简单,首先创建instance:
var ie6select = new _rdc.IE6SelectHelper();
隐藏特定div或其他html element遮盖下的select:
ie6select.hideSelect( someDivId );
重新显示html element遮盖下的select:
ie6select.showSelect();
源代码下载: