用脚本修复IE6 select overlap bug(遮盖问题)

by Weijie JIN on

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();  

源代码下载:

点击下载

Previous post:

Next post: