小编典典

将CSS应用于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选项来做到这一点?我从文档中没有得到太多帮助。

请注意,我正在创建的“取消”按钮是预定义的类型,但是“保存”是我在定义自己。不知道这是否对这个问题有影响。

任何帮助,将不胜感激。谢谢。

更新: 共识是这里有两条路可走:

  1. 使用Firefox插件(如firebug)检查HTML ,并注意jQuery将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)
    }
});

阅读 271

收藏
2020-05-16

共1个答案

小编典典

我将我对类似问题的答案重新发布,因为似乎没有人在这里给出答案,而且它更加干净整洁:

使用替代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)
    }
});
2020-05-16