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

【问题标题】：How to apply CSS theme to only a specific jQuery-UI element?如何将 CSS 主题仅应用于特定的 jQuery-UI 元素？
【发布时间】：2010-10-23 03:08:07
【问题描述】：

我已经用我自己的 CSS 主题构建了一个网站。我正在使用 jQuery UI“选项卡”小部件，但没有来自 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。希望新代码能解决这个问题。

【问题讨论】：

查看下面的 cmets。您可以通过 wrap() 的“hack”来解决此问题 - 使用您自己的 div 对创建的 div 进行处理，该 div 应用了 CSS 范围。在日期选择器的选项中： beforeShow: function () { $("#ui-datepicker-div").wrap("
"); }

标签： jquery css jquery-ui

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

我不确定这是否是最好的方法，但它对我的目的有效。

【讨论】：

【解决方案3】：

我可能遗漏了一些东西，但你不能只为你的日期选择器对象添加一个类并在上面选择吗？

【讨论】：

【解决方案4】：

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

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

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

注意：在将日期选择器添加到 DOM 和应用新类之间会有一点延迟，这意味着在页面完成加载时日期选择器可能会显示为无样式。

【讨论】：

至于必须将事件附加到load 而不是ready：如果您在设置datepickers 之后应用包装，ready 也应该可以.
我在日历小部件的 beforeShow 事件中添加了相同的代码，这解决了这个问题，而不依赖于窗口的加载事件，因为我在将焦点更改为输入字段后动态显示日历。
在我的例子中，我使用了#idenifer 作为范围，所以我不得不使用$('#identifier').append($('#ui-datepicker-div')。

【解决方案5】：

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

【讨论】：

【解决方案6】：

简单地向 datepicker div 添加一个 css 类对我不起作用，我必须像这样围绕它创建另一个 div：

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

【讨论】：

【解决方案7】：

这对我有用

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

【讨论】：