Question

我的网站已经使用自己的CSS主题构建。我正在使用jQuery UI“tabs”小部件，但没有来自jQuery-UI的CSS。

现在，我正在尝试在我的某个页面中添加“日期选择器”小部件。如果我可以重用jQuery-UI默认主题就好了。

问题是日期选择器主题也适用于我的选项卡CSS。例如，“ui-widget”css属性应用于日期选择器和制表符元素。

我似乎无法找到将css属性仅应用于日期选择器的方法。我看不到只适用于日期选择器DIV的“超级选择器”。

处理此问题的最佳方法是什么？

[编辑] datepicker小部件确实是问题所在。我无法应用特定于它的CSS样式。这是弹出的DIV的起始代码：

<div style="position: absolute; top: 300.4px; left: 149px; display: block;" id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"><div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">

因此，我无法添加超级选择器。什么是伟大的将是日期选择器小部件支持CSS scope。但事实并非如此。我无法手动编辑jQuery CSS文件。

日期选择器目前为refactored。希望新代码能够解决这个问题。

Answer 1

$(window).load(function() {
   $('#ui-datepicker-div').addClass('CSS-Scope-Class');
});

.addClass() jQuery函数会将必要的类添加到日期选择器中，以便主题样式表选取它。

我必须附加到窗口的加载事件而不是文档的ready事件，因为那时还没有插入日期选择器。

注意：将datepicker添加到DOM和应用新类之间会有一个小的延迟，这意味着在页面加载完成时，datepicker可能看起来没有样式。

Answer 2

您可以使用主题滚轮http://jqueryui.com/themeroller/

自定义主题

使用Firebug的inspect DOM功能找到要设置样式的项目，以定位要选择的类。

Answer 3

我对datepicker和手风琴有同样的问题。我想要使用日期选择器的新造型，但不希望它用于手风琴。我采取了简单的方法，我复制了ui.theme.css的相关部分，并在所有样式前添加了.ui-datepicker。这仅针对日期选择器，并且仅保留所有其他UI插件。

我不确定这是否是最好的方式，但它适用于我的目的。

Answer 4

我可能会遗漏一些东西，但你不能只是在日期选择器对象中添加一个类并选择它吗？

Answer 5

尝试：$('#cmsContent').css('margin', '0');

Answer 6

简单地将一个css类添加到datepicker div对我来说不起作用，我不得不像这样创建另一个div：

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

Answer 7

这对我有用

$("#ui-datepicker-div").wrap("<div class='Your-CSS-Scope-Class'></div>");

如何将CSS主题仅应用于特定的jQuery-UI元素？

7 个答案: