Question

在我的xhtml页面中使用Jquery Dialog框。由于有2个Jquery Dialog框和外观＆amp;每个盒子的感觉与另一个盒子不同，我必须使用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',
....

但是，我注意到只有一个类被覆盖了。我的意思是说，虽然我已经覆盖了很多类，但只有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。您应该使用其他样式来反映相关的选择器，但前面加上#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;
}

Jquery对话框中的最大dialogClass数

1 个答案: