对 jQuery 对话框按钮应用 CSS

因此，我目前有一个 jQuery 对话框，其中有两个按钮: 保存和关闭。我使用下面的代码创建对话框:

$dialogDiv.dialog({
autoOpen: false,
modal: true,
width: 600,
resizable: false,
buttons: {
Cancel: function() {
// Cancel code here
},
'Save': function() {
// Save code here
}
},
close: function() {
// Close code here (incidentally, same as Cancel code)
}
});

但是，当使用此代码时，两个按钮的颜色相同。我希望“取消”按钮与“保存”按钮的颜色不同。有没有一种方法可以使用一些内置的 jQuery 选项来实现这一点？我没从文件中得到什么帮助。

注意，我正在创建的 Cancel 按钮是预定义的类型，但是‘ Save’是我自己定义的。不确定这是否会对这个问题产生影响。

如果你能帮忙，我会很感激的，谢谢。

最新消息: 人们一致认为，这里有两条路可走:

  1. 使用 Firefox 检查 HTML 像 纵火犯这样的插件，注意 JQuery 的 CSS 类 应用于按钮，并采取 试图覆盖它们 我的 HTML，两个按钮都使用了 完全相同的 CSS 类，没有唯一的 ID，因此这个选项被取消。
  2. 在打开对话框时使用 jQuery 选择器 去抓住我想要的按钮, 然后添加一个 CSS 类。

我选择了第二个选项，并使用了 jQuery find ()方法，因为我认为这比使用: first 或: first-child b/c 更合适。我想要更改的按钮不一定是标记中列出的第一个按钮。使用 find，我可以只指定按钮的名称，然后以这种方式添加 CSS。我最终得到的代码如下:

$dialogDiv.dialog({
autoOpen: false,
modal: true,
width: 600,
resizable: false,
buttons: {
Cancel: function() {
// Cancel code here
},
'Save': function() {
// Save code here
}
},
open: function() {
$('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButtonClass');
}
close: function() {
// Close code here (incidentally, same as Cancel code)
}
});
118358 次浏览
小开

Why not just inspect the generated markup, note the class on the button of choice and style it yourself?

小开

Maybe something like this?

$('.ui-state-default:first').addClass('classForCancelButton');
小开

I think there are two ways you can handle that:

  1. Check using something like firebug if there is a difference (in class, id, etc.) between the two buttons and use that to address the specific button
  2. Use something like :first-child to select for example the first button and style that one differently

When I look at the source with firebug for one of my dialogs, it turns up something like:

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<button class="ui-state-default ui-corner-all ui-state-focus" type="button">Send</button>
<button class="ui-state-default ui-corner-all" type="button">Cancel</button>
</div>

So I could for example address the Send button by adding some styles to .ui-state-focus (with perhaps some additional selectors to make sure I override jquery's styles).

By the way, I´d go for the second option in this case to avoid problems when the focus changes...

小开

I suggest you take a look at the HTML that the code spits out and see if theres a way to uniquely identify one (or both) of the buttons (possibly the id or name attributes), then use jQuery to select that item and apply a css class to it.

小开

You can use the open event handler to apply additional styling:

 open: function(event) {
$('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButton');
}
小开

Select the div which has role dialog then get the appropriate buttons in it and set the CSS.

$("div[role=dialog] button:contains('Save')").css("color", "green");
$("div[role=dialog] button:contains('Cancel')").css("color", "red");
小开
最佳答案

I’m reposting my answer to a similar question because no-one seems to have given it here and it’s much cleaner and neater:

Use the alternative buttons property syntax:

$dialogDiv.dialog({
autoOpen: false,
modal: true,
width: 600,
resizable: false,
buttons: [
{
text: "Cancel",
"class": 'cancelButtonClass',
click: function() {
// Cancel code here
}
},
{
text: "Save",
"class": 'saveButtonClass',
click: function() {
// Save code here
}
}
],
close: function() {
// Close code here (incidentally, same as Cancel code)
}
});
小开

You should change the word "className" for "class"

buttons: [
{
text: "Cancel",
class: 'ui-state-default2',
click: function() {
$(this).dialog("close");
}
}
],
小开

If still noting is working for you add the following styles on your page style sheet

.ui-widget-content .ui-state-default {
border: 0px solid #d3d3d3;
background: #00ACD6 50% 50% repeat-x;
font-weight: normal;
color: #fff;
}

It will change the background color of the dialog buttons.

小开

There is also a simple answer for defining specific styles that are only going to be applied to that specific button and you can have Jquery declare element style when declaring the dialog:

id: "button-delete",
text: "Delete",
style: "display: none;",
click: function () {}

after doing that here is what the html shows: enter image description here

doing this allows you to set it, but it is not necessarily easy to change using jquery later.


提交答案