使用CSS范围以编程方式创建jQuery UI datepicker [英] Making a programmatically created jQuery UI datepicker work with CSS scope

问题描述

这解决了从版本1.10.3开始修复不的jQuery UI的限制。

This addresses a limitation of jQuery UI that has not been fixed as of version 1.10.3.

jQuery UI有一个 themeroller 函数，允许您设置jQuery UI小部件的样式，但有时您需要在一个页面上有多个主题，所以themeroller允许您在创建窗口小部件时指定CSS范围。这只是一个自定义CSS类名，在themerolled CSS中使用它来消除主题CSS的歧义。以下是由themeroller生成的CSS规则示例：

jQuery UI has a themeroller function that allows you to style your jQuery UI widgets, but sometimes you need to have multiple themes on the one page, so the themeroller allows you to specify a CSS "scope" when you create the widgets. This is simply a custom CSS class name that is used in the themerolled CSS to disambiguate the theme's CSS. Here is an example of a CSS rule that is generated by themeroller:

.myCustomClass .ui-buttonset { margin-right: 7px; }

其中 myCustomClass 是生成时的范围主题小部件。我们的想法是，您可以通过将类分配给表单，div或呈现小部件的任何容器来指定页面的哪个部分具有您的自定义主题：

where myCustomClass is the "scope" that was given when generating the themed widgets. The idea is that you can then specify which part of the page is to have your custom theme by assigning the class to the form, div or whatever container in which your widgets are rendered:

<div class="myCustomClass">
...your custom themed widgets go here...
</div>

问题是有些小部件，特别是 datepicker 会创建另一个 div 附加到文档正文。它看起来像这样：

The problem is that some widgets, notably the datepicker create another div that is appended to the document body. It looks something like this:

<div id="ui-datepicker-div"
     class="ui-datepicker ui-widget ui-..."
     style="position: absolute; ..."
>...</div>

通常情况下，您无法通过指定样式显示来隐藏此div：无但是一旦创建了一个datepicker，它就会一直存在。它由页面上的所有日期选择器共享。当一个日期选择器需要显示一个选择器时，这就是显示的div。

Normally you can't see this div as it is hidden by assigning the style display: none but it is there all the time once a datepicker has been created. It is shared by all datepickers on the page. When a datepicker needs to show a "picker" this is the div that gets displayed.

但是这个选择器div不在表单，div或包含你的小部件的任何内容中，所以它失去了所有的样式，因为它不在class =myCustomClass的容器中。显示选择器时非常明显。

But this picker div is not inside the form, div or whatever contains your widgets, so it loses all of its styling because it's not inside a container where class="myCustomClass". This is pretty obvious when the picker is displayed.

常见的解决方法是在文档准备就绪后运行：

A common workaround is to run this once the document is ready:

$("#ui-datepicker-div").wrap('<div class="myCustomClass" />');

但只有在页面上已经实例化了一个日期选择器时，这才有效。但是我必须即时创建我的小部件，那么在这种情况下我可以做些什么来使日期选择器工作？

But this will only work if a datepicker has already been instantiated on the page. But I have to create my widgets on-the-fly, so what can I do to make the datepicker work in this case?

推荐答案

我的解决方案是在应用 .wrap 变通方法之前创建一个虚拟日期选择器，如下所示：

My solution is to create a dummy datepicker before applying the .wrap workaround as follows:

$(document).ready(function(){
    // The following is a workaround for datepicker not working with
    // a CSS "scope" setting.
    $("<input type='hidden'/>").appendTo($('body')).datepicker();
    $("#ui-datepicker-div").wrap('<div class="myCustomClass" />');
});

但是你只能这样做一次，所有的选择器都会显示在给定的主题中。

But you can only do this once, and all your pickers will be displayed in the given theme.

这篇关于使用CSS范围以编程方式创建jQuery UI datepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！