将CSS应用于jQuery对话框按钮
将CSS应用于jQuery对话框按钮
提问于 2009-12-02 02:33:56
所以我现在有一个带有两个按钮的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”是我自己定义的。不确定这是否会对这个问题产生任何影响。
任何帮助都将不胜感激。谢谢。
更新：的共识是有两条路可以走：
- 使用firebug之类的Firefox插件检查HTML，注意jQuery应用于按钮的CSS类，并尝试覆盖它们。注意:在我的超文本标记语言中，这两个按钮使用了完全相同的CSS类，并且没有唯一的in，所以这个选项是不存在的。
- 在打开对话框时使用jQuery选择器来捕获我想要的按钮，然后添加一个CSS类。
我选择了第二个选项，并使用了jQuery find()方法，因为我认为这比使用:first or : 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)
}
});回答 10
Stack Overflow用户
回答已采纳
发布于 2011-03-28 17:35:49
我在my answer上重发了一个类似的问题，因为似乎没有人在这里给出它，而且它更干净、更整洁：
使用替代的buttons属性语法：
$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)
}
});Stack Overflow用户
发布于 2009-12-02 02:50:18
您可以使用open事件处理程序来应用其他样式：
open: function(event) {
$('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButton');
}Stack Overflow用户
发布于 2009-12-02 02:47:05
我认为有两种方法可以解决这个问题：
- 检查是否存在差异(在类、id等方面)在两个按钮之间，并使用它来寻址特定的按钮，
- 使用类似: first -child来选择，例如，第一个按钮和样式，一个不同的
当我查看其中一个对话框的firebug源代码时，结果如下所示：
<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>因此，例如，我可以通过向.ui-state-focus添加一些样式来处理Send按钮(可能还有一些额外的选择器，以确保我覆盖了jquery的样式)。
顺便说一句，在这种情况下，我会选择第二种选择，以避免在焦点改变时出现问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1828010
复制相关文章
相似问题