如何防止 jquery UI 自动添加样式？答案

【问题标题】：How do I prevent jquery UI from adding styles automatically?如何防止 jquery UI 自动添加样式？
【发布时间】：2011-05-27 06:24:02
【问题描述】：

我想知道告诉 jquery UI 不要添加样式类的最简单方法是什么？我正在尝试使用 tabs 插件，它有很多我想要的功能......但我实际上希望它在样式方面什么都不做。我想完全负责它，因为坦率地说，默认设置太忙了，不适用于极简设计。

我在这里发现了一个类似的问题...： jquery ui tabs major style change

...但是他们从一开始就没有阻止添加类。

您可以拒绝在文档顶部加载 css 主题，但随后标签小部件停止工作，尽管没有导致任何 javascript 错误。整个情况简直糟透了，我不想仅仅因为 jquery UI 拒绝让我使用自己的样式而不得不编写自己的选项卡小部件:(

帮助？

【问题讨论】：

一种方法是使用themeroller创建您自己的主题，并使一切尽可能简约。
@brett：是的，我想过这样做……但我实际上喜欢其中的一些主题。像日期选择器和其他人都很好。我只是想通过一些配置选项告诉它，“嘿，不要添加任何类。如果它看起来像垃圾，那就是我的错！”
我还想指出，根本不加载 css 主题会导致 tabs 插件无法工作，这很糟糕。
另一种方法是将某些元素的主题分开，即）将您的简约主题用于大部分页面，然后将样式化的主题用于日期选择器等

标签： jquery css jquery-ui tabs

【解决方案1】：

如果您正在寻找一个阻止添加类的 jQuery UI 选项，那么您就不走运了。

您最好的选择是按照@brett 的建议，制作一个极简主义主题。或者，我可以想象一个 javascript 函数，它给定一个 DOM 元素，通过它进行搜索，孩子们在他们的类属性中寻找一个类列表，然后删除每一个。虽然看起来很邪恶！

【讨论】：

很糟糕，这还不是一个选项。在某些情况下，我必须编写 css 来对抗查询 ui。

【解决方案2】：

如果您想要现有样式，除了一些小部件（选项卡），您可以添加一个外部 div#mytabs，然后覆盖 jquery UI 应用的任何默认样式。

Quick (rough) demo 来说明我的观点。

#mytabs #tabs2 ul.ui-tabs-nav{
    background:lime;
    border-radius:0;
}
#mytabs #tabs2.ui-tabs, #mytabs #tabs2.ui-widget{
    border:magenta;
    border-radius:0;
    background:cyan;
}

这将使您可以选择在不同区域使用默认样式（甚至是选项卡）。当然，您可以只更改 .ui-tabs-nav 类的样式（或再次进行覆盖）。

【讨论】：

【解决方案3】：

下载 jquery ui 包时可能会添加 css 范围

【讨论】：

【解决方案4】：

另一种选择是选择性地删除 jQueryUI 自动添加的类

有点像：

$('#accordion-no-jquery-style').children().attr('class', 'custom-accordion-style')

【讨论】：