将CSS应用于jQuery对话框按钮

前端之家收集整理的这篇文章主要介绍了将CSS应用于jQuery对话框按钮前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我目前有一个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选项?我没有从文档中得到很多帮助。

注意,我创建的取消按钮是一个预定义类型,但’保存’我定义自己。不知道这是否会对这个问题有任何影响。

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

更新:共识是有两条路在这里旅行:

>使用Firefox检查HTML
插件firebug,并注意
jQuery是CSS类
应用于按钮,并采取
刺住他们。注意:在
我的HTML,两个按钮都用了
完全相同的CSS类,没有唯一
ID,所以这个选项出来了。
>在对话框打开时使用jQuery选择器
抓住我想要的按钮,
然后添加一个CSS类。

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

$dialogDiv.dialog({
    autoOpen: false,open: function() {
            $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButtonClass');
        }
    close: function() {
        // Close code here (incidentally,same as Cancel code)
    }
});

解决方法

我再转发 my answer一个类似的问题,因为没有人似乎已经在这里给它,它更干净,更整洁:

使用替代buttons属性语法:

$dialogDiv.dialog({
    autoOpen: false,buttons: [
        {
            text: "Cancel","class": 'cancelButtonClass',click: function() {
                // Cancel code here
            }
        },{
            text: "Save","class": 'saveButtonClass',click: function() {
                // Save code here
            }
        }
    ],same as Cancel code)
    }
});

猜你在找的CSS相关文章