如何覆盖jQuery UI Widget样式并保留功能

我正在寻找一种简单的方法来删除给定小部件实例上由jQuery UI提供的所有样式信息。我对任何东西都很开放，但可重用的JavaScript解决方案将是完美的。绝对必要的是不会丢失任何功能。

最重要的是，所有背景图像被删除，我保持布局样式好。

非常类似...

$tabs = $("#someElement").tabs(); 
$tabs.removeStyles();

但我开到任何可以让我修改部件样式以灵活的方式。

的最终目标是让尽可能多的方式控制尽可能

来源

为了覆盖jquery-ui css使用!important标记。

.ui-dialog { 
    background-color: black !important; 
    }

2010-11-05 21:34:04

+1：恕我直言，即使它不是OP想要的东西（尽管它们是同一个用户？！？！），这是用JS代替样式的最不引人注目的方式，它不会导致一个兔子痛苦的战士。！重要的CSS值经常被忽视并且非常有用。 – tatlar 2012-11-09 21:31:00

您可以轻松创建自己的removeStyles功能。

$.fn.removeStyles = function(){ 
$(this).attr('class',''); 
};

这将删除所选元素的所有样式。

编辑：如果您只想删除jquery ui创建的类，则您的选项有限。您可以将类属性中的类与您输入的jquery-ui类的列表进行比较。没有可以自动删除jquery ui的魔力。

2010-10-25 19:04:28

我很担心删除所有窗口部件类的功能... – 2010-10-25 19:07:13

此外，这将删除我在我想保留的标记中手动分配的类。 – 2010-10-25 19:08:34

你可以删除该css文件，并开始重建，只是你想要的布局。它是很多工作，但这是它的价格...

2010-10-25 19:16:24 DoXicK

删除CSS样式/类的更简单方法是使用。 removeClass()。例如，要覆盖选项卡的所有角落并只有顶角，我使用如下形式：

$('#tabs').tabs().removeClass('ui-corner-all').addClass('ui-corner-top');

希望这有助于您！

2012-02-01 10:03:40 Sandro

回答