IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层、Dialog的问题

      苦逼的程序猿都知道,IE6的使用情况在天朝还是挺普遍的,特别是在爱写日记的领导群中更加喜欢,如果我们做的网页上有下拉框、Div浮动层、 Dialog之类的,会看到下拉选框总是把浮动区块div覆盖划破,而我尝试使用z-index属性也未能解决,但我们可以使用bgiframe 插件解决IE6 的这个bug。

好好的Jquery-DiaLog在有下拉框的页面显示的是这个鸟样。

首先去jquery 官方网下载 jquery.bgiframe.js ,然后在页面引入插件:

<script type="text/javascript" src="jquery.bgiframe.js"></script>

 然后对浮动层或者Dialog进行设置

<script type="text/javascript">
       $(function() {
           $('#DivLay').bgiframe();       //DivLay为浮动Div层的ID
        });
</SCRIPT>

//或者,如果你使用的是Jquery的Dialog,可以利用Dialog的属性达到这个目的。

 $(document).ready(function(){
   $('#dialog').dialog({
      height:600,
      width: 900,
      bgiframe: true         //解决下拉框遮盖div的bug
  });
 });

 

有图有真相:现在Dialog已经在IE6中完全覆盖下拉框了

附带插件源码:保存为js文件即可!

/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
 * Licensed under the MIT License (LICENSE.txt).
 *
 * Version 2.1.3-pre
 */

(function($){

$.fn.bgiframe = ($.browser.msie && /msie 6.0/i.test(navigator.userAgent) ? function(s) {
    s = $.extend({
        top     : 'auto', // auto == .currentStyle.borderTopWidth
        left    : 'auto', // auto == .currentStyle.borderLeftWidth
        width   : 'auto', // auto == offsetWidth
        height  : 'auto', // auto == offsetHeight
        opacity : true,
        src     : 'javascript:false;'
    }, s);
    var html = '<iframe class="bgiframe"frameborder="0"tabindex="-1"src="'+s.src+'"'+
                   'style="display:block;position:absolute;z-index:-1;'+
                       (s.opacity !== false?'filter:Alpha(Opacity='0');':'')+
                       'top:'+(s.top=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+'px')':prop(s.top))+';'+
                       'left:'+(s.left=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+'px')':prop(s.left))+';'+
                       'width:'+(s.width=='auto'?'expression(this.parentNode.offsetWidth+'px')':prop(s.width))+';'+
                       'height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+'px')':prop(s.height))+';'+
                '"/>';
    return this.each(function() {
        if ( $(this).children('iframe.bgiframe').length === 0 )
            this.insertBefore( document.createElement(html), this.firstChild );
    });
} : function() { return this; });

// old alias
$.fn.bgIframe = $.fn.bgiframe;

function prop(n) {
    return n && n.constructor === Number ? n + 'px' : n;
}

})(jQuery);

转载请注明:DotNetGeek  http://www.DotNetGeek.cn

作者:dotnetgeek
出处: http://www.cnblogs.com/waynechan
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

如果你觉得本文写得不错,请点击右下角的推荐按钮,如果觉得本文有所欠缺,请评论或联系我!

如果你是广州、深圳、东莞三地的程序员,我欢迎你加入广深莞.NET技术交流群: 185718116

posted @ 2012-06-29 15:45  dotnetgeek  阅读(3386)  评论(0编辑  收藏  举报