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

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范围。但它没有。我被困在手动编辑jQuery CSS文件中。

日期选择器目前正在重构。希望新代码能解决这个问题。

- Thierry Roy

---

请参考下面的注释。您可以通过使用“hack”的方法将创建的div包装在自己的div中，并将CSS作用域应用于它来解决这个问题。在日期选择器的选项中：beforeShow: function () { $("#ui-datepicker-div").wrap("<div class='my-scope' />"); } - CodeMonkeyKing

Answer 1

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

.addClass() jQuery函数将为日期选择器添加必要的类，以便主题样式表可以使用。

我不得不附加到窗口的加载事件上，而不是文档的就绪事件，因为那时日期选择器还没有被插入。

注意：在日期选择器添加到DOM和应用新类之间会有一小段延迟，这意味着在页面完成加载时日期选择器可能显示未经过样式处理。

- Ryan

---

关于必须将事件附加到“load”而不是“ready”的问题：如果在设置“datepicker”之后应用包装，则“ready”也应该可以工作。 - Halil Özgür

我在日历小部件的beforeShow事件中添加了相同的代码，这样就解决了问题，而不依赖于窗口的加载事件，因为我是在将焦点更改到输入字段后动态显示日历。 - CodeMonkeyKing

在我的情况下，我使用了 #identifier 作为范围，所以我必须使用 `$('#identifier').append($('#ui-datepicker-div')。 - Gus

Answer 2

您可以使用主题滚动条在此处http://jqueryui.com/themeroller/自定义您的主题。

使用Firebug的检查DOM功能查找要样式化的项目，以便选择您想要选取的类。

- Chad Grant

Answer 3

仅仅给日期选择器div添加一个css类对我来说不起作用，我不得不像这样创建另一个div:

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

- Glenn Lawrence

Answer 4

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

- Vishal

Answer 5

我在使用日期选择器和手风琴时遇到了同样的问题。我想要新的日期选择器样式，但不想用于手风琴。我采取了简单的方法，复制了ui.theme.css的相关部分，并在所有样式前面添加了.ui-datepicker。这只针对日期选择器，而不影响其他UI插件。

我不确定这是否是最好的方法，但它适合我的目的。

- Shaun Humphries

Answer 6

我可能漏掉了什么，但是你不能只是给你的日期选择器对象添加一个类并在其上进行选择吗？

- Jeremy French

Answer 7

这对我有效

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

- Doc Kodam