jquery - 如何将样式表仅应用于我的 jquery datepicker 小部件？

Question

我的主页由选项卡型小部件控制，并且我有一个专门为此设计的样式表。然而，我最近才意识到我的应用程序中也需要一个日期选择器。我已将 jquery-ui-style.cs 样式表添加到我的项目中。问题是我只希望这个样式表影响我的日期选择器而不是我的选项卡。

有没有办法仅在页面最初加载时或文本框聚焦时将此样式表应用于我的日期选择器？

可能不需要，但这是我的日期选择器的 jquery:

$(function () {
    $("#txtViewWeeksData").datepicker({
        changeMonth: true,
        changeYear: true,
        showOtherMonths: true,
        selectOtherMonths: true
    });
});

Answer 1

遗憾的是没有“简单”的方法。

但我在这里举了一个例子:http://jsfiddle.net/ggwGs/9/

在下载页面(http://jqueryui.com/download)上，您可以在“主题”下选择“高级”。您可以在其中创建自定义“CSS 范围”，输入特殊主题名称，例如“.customTheme”，然后按 donnload。

如果您创建了自定义主题，则在“下载主题”下执行完全相同的操作。

现在我们需要在事件时将 CSS 范围类添加到日期选择器，并在不活动时将其删除。

所以我们这样做:

$("#txtViewWeeksData").datepicker({
    changeMonth: true,
    changeYear: true,
    showOtherMonths: true,
    selectOtherMonths: true,
    beforeShow: function(input, inst) {$(inst.dpDiv).addClass('customTheme');},
    onClose: function(dateText, inst) {$(inst.dpDiv).removeClass('customTheme');}
});

基本上，我们告诉它在显示之前添加范围，并在关闭之后再次删除它。