所以我目前有一个带有两个按钮的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选项来做到这一点?我从文档中没有得到太多帮助。
请注意,我正在创建的“取消”按钮是预定义的类型,但是“保存”是我在定义自己。不知道这是否对这个问题有影响。
任何帮助,将不胜感激。谢谢。
更新: 共识是这里有两条路可走:
我选择了第二个选项,并使用了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) } });
我将我对类似问题的答案重新发布,因为似乎没有人在这里给出答案,而且它更加干净整洁:
使用替代buttons属性语法:
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) } });