如何在 IE 6 上将 JQuery UI 日期选择器与 bgIframe 结合使用

发布于 2024-07-06 07:52:34 字数 441 浏览 8 评论 0原文

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

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

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

当前代码

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一梦等七年七年为一梦 2024-07-13 07:52:34

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

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

回复收藏 0 原文

虐人心 2024-07-13 07:52:34

我也因为这个问题非常担心。
解决方案变成如下。

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

I worried very much due to the problem, too.
The solution becomes the following.

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

回复收藏 0 原文

三岁铭 2024-07-13 07:52:34

我已经注意到 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 });

in css file set the width of .ui-datepicker-封面为 220px，高度为 200px

Steve

I have noted Marc's comment that the ui-datepicker-cover style should handle this. In my case the right and bottom edges of the calendar would still show drop downs through them.

It looks like the size of the iFrame is initially being set by the following lines of code

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

in the postProcess function.

This size is then reset each time the date is changed by the line

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

My simplistic solution was to remove these two sets of code and fix the size of the cover style in the .css file

//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 });

in css file set the width of .ui-datepicker-cover to 220px, height to 200px

Steve

回复收藏 0 原文

┾廆蒐ゝ 2024-07-13 07:52:34

我有类似的东西并使用 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();
}
});

i had something like this and to use the bgIframe plugin, just i put the bgiframe(); function inside onBeforeShow() datepicker's method

check it

$('#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();
}
});

回复收藏 0 原文

~没有更多了~