将 CSS 应用于 jQuery 对话框按钮 [英] Apply CSS to jQuery Dialog Buttons
问题描述
所以我目前有一个带有两个按钮的 jQuery 对话框:保存和关闭.我使用以下代码创建对话框:
So I currently have a jQuery dialog with two buttons: Save and Close. I create the dialog using the code below:
$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 选项来做到这一点?我没有从文档中得到太多帮助.
However, both buttons are the same color when this code is used. I'd like my Cancel button to be a different color than my Save. Is there a way to do this using some built in jQuery options? I didn't get much help from the documentation.
请注意,我创建的取消"按钮是预定义的类型,但保存"是我自己定义的.不确定这是否会影响这个问题.
Note that the Cancel button I'm creating is a pre-defined type, but 'Save' I'm defining myself. Not sure if that will have any bearing on the issue.
任何帮助将不胜感激.谢谢.
Any help would be appreciated. Thanks.
更新:一致认为这里有两条路可以走:
UPDATE: Consensus was that there were two roads to travel here:
- 使用 Firefox 检查 HTMLfirebug 之类的插件,并注意jQuery 的 CSS 类适用于按钮,并采取试图覆盖它们.注意:在我的 HTML,两个按钮都使用了完全相同的 CSS 类,没有唯一的ID,因此此选项已失效.
- 在对话框打开时使用 jQuery 选择器抓住我想要的按钮,然后给它添加一个 CSS 类.
- Inspect the HTML using a Firefox plugin like firebug, and note the CSS classes that jQuery is applying to the buttons, and take a stab at overriding them. Note: in my HTML, both buttons were used the exact same CSS classes and no unique IDs, so this option was out.
- Use a jQuery selector on dialog open to catch the button that I wanted, and add a CSS class to it then.
我选择了第二个选项,并使用了 jQuery find() 方法,因为我认为这比使用 :first 或 :first-child b/c 更合适,我想更改的按钮不一定是第一个标记中列出的按钮.使用 find,我可以只指定按钮的名称,然后以这种方式添加 CSS.我最终得到的代码如下:
I went with the second option, and used the jQuery find() method as I think this is more appropriate than using :first or :first-child b/c the button that I wanted to change wasn't necessarily the first button listed in the markup. Using find, I can just specify the name of the button, and add CSS that way. The code I ended up with is below:
$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)
}
});
推荐答案
我正在转发 我对类似问题的回答 因为似乎没有人在这里给出它而且它更干净整洁:
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:
使用替代的 buttons
属性语法:
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)
}
});
这篇关于将 CSS 应用于 jQuery 对话框按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!