2

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

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

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>

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>

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.

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?

4

1 回答 1

2

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

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

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

于 2013-09-05T22:57:31.910 回答