如何在 IE 6 上使用带有 bgIframe 的 JQuery UI 日期选择器答案

【问题标题】：How to use JQuery UI datepicker with bgIframe on IE 6如何在 IE 6 上使用带有 bgIframe 的 JQuery UI 日期选择器
【发布时间】：2010-09-14 13:59:28
【问题描述】：

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

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

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

当前代码

$(".DateItem").datepicker({
showOn:"按钮",
...等...
});
$(".ui-datepicker-div").bgIframe();

【问题讨论】：

我向日期选择器作者发送了一封电子邮件，让他知道您的问题

标签： jquery datepicker bgiframe

【解决方案1】：

这应该默认为您处理。

iframe 默认包含在 IE6 的日期选择器中。它的样式，称为 ui-datepicker-cover 处理透明度。唯一不是这种情况的情况是在旧的 themeroller 代码中没有样式。

【讨论】：

【解决方案2】：

我也很担心这个问题。解决方案变为以下。

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

【讨论】：

【解决方案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

史蒂夫

【讨论】：

【解决方案4】：

我有类似的东西并使用 bgIframe 插件，只是我将bgiframe(); 函数放在onBeforeShow() datepicker 的方法中

检查一下

$('#date').DatePicker({
format:'Y/m/d',
date: $('#date').val(),
current: $('#date').val(),
position: 'r',
onBeforeShow: function(){
    $('#date').DatePickerSetDate($('#date').val(), true);
    $('.datepickerContainer').bgiframe();
},
onChange: function(formated, dates){
    $('#date').val(formated);
    $('#date').DatePickerHide();
}
});

【讨论】：