如何在IE 6上通过bgIframe使用JQuery UI日期选择器

Question

我正在尝试使用IE6网站上的JQuery UI日期选择器(最新稳定版本1.5.2)。但我在IE6的组合框(选择)中遇到了常见的问题，它们浮动在其他控件之上。我尝试在声明datepicker之后添加bgIframe插件，但没有成功。

我的猜测是，在显示日历之前，我附加bgIframe的.ui-datepicker-div是不存在的。

我想知道是否可以将.bgIframe()命令直接放入datepicker .js文件中，如果可以，放在哪里？( kelvin Luck的类似控制使用了这种方法)

当前代码

$(".DateItem").datepicker({

 showOn:"button",

 ... etc ...

})；

$(".ui-datepicker-div").bgIframe()；

Answer 1

默认情况下，应该为您处理这一点。

默认情况下，iframe包含在datepicker的IE6中。它的样式称为ui-datepicker-cover，用于处理透明度。唯一不是这样的情况是在旧的代码中，样式不在里面。

Answer 2

由于这个问题，我也非常担心。解决方案如下所示。

$(".DateItem").datepicker({
  showOn:"button",
  beforeShow:function(){
    $('#ui-datepicker-div').bgiframe();
  },
  ... etc ...
});

Answer 3

我注意到了Marc的评论，即ui-datepicker-cover样式应该处理这个问题。在我的例子中，日历的右边缘和下边缘仍然会通过它们显示下拉列表。

看起来iFrame的大小最初是由以下几行代码设置的

if ($.browser.msie && parseInt($.browser.version, 10) < 7) // fix IE < 7 select problems
$('iframe.ui-datepicker-cover').css({ width: inst.dpDiv.width() + 4, height: inst.dpDiv.height() + 4 });

在postProcess函数中。

每次行更改日期时，都会重置此大小

inst.dpDiv.empty().append(this._generateHTML(inst)).
find('iframe.ui-datepicker-cover').
css({ width: dims.width, height: dims.height });

我的简单解决方案是删除这两组代码，并修改.css文件中封面样式的大小

//if ($.browser.msie && parseInt($.browser.version, 10) < 7) // fix IE < 7 select problems
//    $('iframe.ui-datepicker-cover').css({ width: inst.dpDiv.width() + 4, height: inst.dpDiv.height() + 4 });

inst.dpDiv.empty().append(this._generateHTML(inst))//.    <=== note the // before the .
//find('iframe.ui-datepicker-cover').
//css({ width: dims.width, height: dims.height });

在css文件中，将.ui-datepicker-cover的宽度设置为220px，高度设置为200px

史蒂夫