如何覆盖jQuery UI小部件样式并保持功能

Question

我正在使用jQuery UI进行内部应用。

---

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

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

理想情况下......

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

但我愿意接受任何允许我灵活修改小部件样式的内容。

最终目标是让尽可能多地控制样式

Answer 1

要覆盖jquery-ui css，请使用!important标记。

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

Answer 2

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

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

希望这有帮助！

Answer 3

您可以轻松创建自己的removeStyles函数。

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

这将从您选择的元素中删除所有样式。

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

Answer 4

你可以删除css文件并开始使用你想要的布局重建它。这是很多工作，但这是随之而来的价格......