jquery - Jquery对话框中dialogClass的最大数量

Question

我在我的 xhtml 页面中使用 Jquery Dialog 框。由于有 2 个 Jquery Dialog 框，每个框的外观和感觉都不同，我不得不使用 addClass 属性，这已在 this post 中讨论过。 .现在我必须覆盖许多类，如 ui-dialog、ui-corner-all、ui-widget-header 等。因此，我继续使用 addClass 添加类。代码如下，

$('.ui-widget-content').addClass('new-ui-widget-content');
$('.ui-widget').addClass('new-ui-widget');
$('.ui-dialog .ui-dialog-titlebar').addClass('new-ui-dialog new-ui-dialog-titlebar');
$('.ui-widget-header').addClass('new-ui-widget-header');
 $('.ui-helper-clearfix').addClass('new-ui-helper-clearfix');
 ....

$j("#dialog").dialog({
dialogClass: 'new-ui-widget-content',
dialogClass: 'new-ui-widget',
dialogClass: 'new-ui-dialog new-ui-dialog-titlebar',
dialogClass: 'new-ui-widget-header',
dialogClass: 'new-ui-helper-clearfix',
....

但是，我注意到只有 1 个类被覆盖了。我的意思是说，虽然我已经覆盖了很多类，但只有 new-ui-widget-content 被覆盖了(放在第一位)。

我也试过下面的方法。但它给出了语法错误。

    $j("#dialog").dialog({
        dialogClass: 'new-ui-widget-content','new-ui-widget',......

addClass 可以覆盖多个类吗？

如果可以，如何实现？

Answer 1

您确实应该通过 CSS 覆盖不需要的样式，而不是通过 JavaScript 交换多个 CSS 类。您所需要的只是第二个对话框的一些标识符。如果 #dialog 是第一个，我想第二个的名称与 #dialog2 类似。

将第二个样式表文件添加到 HTML 页面或附加到原始 jquery-ui-rev.css。您的其他样式应反射(reflect)有问题的选择器，但在 #dialog2 之前，这会增加特异性并为名为 #dialog2 的包装器内的任何此类设置特殊格式。

因为我找不到jquery-ui-rev.css，我给你一个基于the jquery.ui.dialog.css 的例子。 .

如果你想覆盖原始选择器 .ui-dialog 中的某些特定属性:

.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }

...您可以通过设置另一个选择器来做到这一点，同时只重新指定适当的属性:

#dialog2 .ui-dialog {
    width: 500px;
}