dialogClass不应用给定的style类 [英] dialogClass not applying the given style class
问题描述
在我的xhtml页面中使用2 Jquery Dialog 框。有2个链接，当用户点击这些链接时，每个链接将呈现不同的对话框框。不同的对话框框在感觉外观上是不同的。因为两个都指向jquery-ui-rev.css，无论在 .css 文件中进行什么CSS更改，它都应用于对话框框。
所以，我尝试使用 dialogClass 。我将 dialogClass 用于对话框框之一，并保留原样。
我想出了下面的代码并部署它。
$ j ）.dialog（{pre>
dialogClass：'ui-dialog'，
....
< head>
< style type =text / css >
.ui-dialog
{
padding：none;
overflow：hidden;
position：absolute;
width：100px;
left：100px;
top：100px;
}
< / style>
< / head>
但是，
ui-dialog类在这里写的不是覆盖标准然后，我还尝试使用不同的名称为ui（-dialog。即，我用my-dialog重命名为ui-dialog对话框不会应用于对话框框，它仍然需要标准的CSS类ui-dialog。
然后，我也尝试了下面的代码
$ j（＃dialog）。addClass（'my-dialog'）。dialog（{
这也不能覆盖标准的
ui-dialog类。
PS注意：我已将
jquery-ui-rev.css更名为jquery-ui-curretpacks.css。jquery-ui-currentpacks.css包含jquery-ui-rev.css的完整内容
@Dipaks 我已经尝试过您提到的解决方案。代码如下，
$（'。ui-dialog'）。addClass（'new-ui-dialog'）;/ pre>
$ j（＃dialog）。dialog（{
dialogClass：'new-ui-dialog'，
....
但是，如我在新图像中附加的，可以看到虽然ui-dialog正在被new-ui-dialog替代，但css属性
我也试过没有dialogClass，如下所示，
$ j（＃dialog）。dialog（{
.....< style type =text / css>
.new -ui-dialog
{
//我的新css
}
< / style>
在这个SS中，new-ui-dialog属性会被覆盖。
解决方案
.ui-dialog如果你想覆盖这些样式，请执行以下操作：$（'。ui- dialog'）。addClass（'new-ui-dialog'）;
CSS -
.new-ui-dialog {color：red！important; }
Am using 2
Jquery Dialogbox in my xhtml page. There are 2 links and when a user clicks on those links each link will render a differentDialogbox. DifferentDialogbox in the sense look and feel are different. Since both are referring to jquery-ui-rev.css whatever CSS changes are done in that.cssfile, it is getting applied to both theDialogbox.So, I tried with
dialogClass. I applieddialogClassfor one of theDialogbox and left the other as it is.And I came up with below code and deployed it.
$j("#dialog").dialog({ dialogClass: 'ui-dialog', .... <head> <style type="text/css"> .ui-dialog { padding: none; overflow: hidden; position: absolute; width: 100px; left: 100px; top: 100px; } </style> </head>But,
ui-dialogclass I have written here is not overriding the standardui-dialogclass ofjquery-ui-rev.css. Then, I also tried with a different name forui-dialog. i.e., I renamedui-dialogwithmy-dialog. Even thenmy-dialogis not getting applied forDialogbox. It still takes from standard CSS class ofui-dialog.Then, I also tried with below code
$j("#dialog").addClass('my-dialog').dialog({This also couldn't override the standard
ui-dialogclass.PS Note : I have renamed
jquery-ui-rev.csstojquery-ui-curretpacks.css.jquery-ui-currentpacks.csscontains exact contents ofjquery-ui-rev.css@Dipaks I have tried the solution as you have mentioned. Code is as below,
$('.ui-dialog').addClass('new-ui-dialog'); $j("#dialog").dialog({ dialogClass: 'new-ui-dialog', ....But, as I have attached in the new image, it can be seen that though ui-dialog is getting replaced by new-ui-dialog, but css properties are still taken from ui-dialog.
I also gave a try without dialogClass like below, $j("#dialog").dialog({ .....
<style type="text/css"> .new-ui-dialog { //my new css } </style>Am attaching 3rd image here. In this SS, new-ui-dialog attributes are overridden still.
解决方案
.ui-dialogis adding inline css for the element. If you want to override these styles do this -$('.ui-dialog').addClass('new-ui-dialog');CSS -
.new-ui-dialog { color: red !important; }
这篇关于dialogClass不应用给定的style类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
