如何将CSS主题只应用于特定的jQuery-UI元素？ [英] How to apply CSS theme to only a specific jQuery-UI element?

问题描述

我有一个网站已经建立我自己的CSS主题。我使用jQuery UI标签小部件，但没有CSS从jQuery-UI。

I have a web site already build with my own CSS theme. I'm using jQuery UI "tabs" widget but no CSS from jQuery-UI.

现在，我想在我的一个页面中添加日期选择器小部件。这将是巨大的，如果我可以重用jQuery-UI默认主题是很好。

Now, I'm trying to add the "Date Picker" widget in one of my page. It would be great if I could reuse jQuery-UI default theme which is just fine.

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

The problem is that the date picker theme is also applied to my tabs CSS. For example the "ui-widget" css properties is applied to both date picker and tabs elements.

我似乎找不到一种方法来应用CSS属性只有日期选择器。我无法看到只适用于日期选择器DIV的超级选择器。

I can't seem to find a way to apply the css properties to only the date picker. I can't see a "super selector" that only applies to the date picker DIV.

什么是最好的处理方式？

What would be the best way to handle this?

datepicker 窗口小部件是真的问题。我不能应用特定于它的CSS样式。以下是弹出的DIV的开始代码：

The datepicker widget is really the problem. I cannot apply CSS style specific to it. Here is the starting code of the DIV that get pops up:

<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文件。

As such, I cannot add a super selector. What would be great would be that the date picker widget supports CSS scope. But it does not. I'm stuck manually editing the jQuery CSS file.

日期选择器目前正在 refactored 。希望新代码将解决此问题。

The Date Picker is currently being refactored. Hopefully the new code will address this issue.

推荐答案

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

。addClass（） jQuery函数将向datepicker添加必要的类，以便由主题样式表选取。

The .addClass() jQuery function will add the necessary class to the datepicker for it to be picked up by the themed stylesheet.

我不得不附加到窗口的加载事件，而不是文档的ready事件，因为datepicker之前没有插入。

I had to attach to the window's load event rather than the document's ready event because the datepicker had not been inserted by then.

注意：将在日期选择器添加到DOM和应用的新类之间的时间之间有一个小的延迟，这意味着当页面正在加载时，日期选择器可能会显示为无模板。

Note: There will be a small delay between the time the datepicker is added to the DOM and the new class applied, which means the datepicker may appear unstyled while the page is finishing loading.

这篇关于如何将CSS主题只应用于特定的jQuery-UI元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！