应用CSS来jQuery的对话框按钮 [英] Apply CSS to jQuery Dialog Buttons

问题描述

所以，我现在有一个jQuery的对话有两个按钮：保存并关闭。我创建了使用以下code中的对话框：

  $ dialogDiv.dialog（{
的AutoOpen：假的，
模式：真实，
宽度：600，
可调整大小：假的，
\t纽扣： {
取消：功能（）{
                        //此处取消code
}，
保存：功能（）{
                        //保存code在这里
}
}，
关闭：函数（）{
//关闭code这里（顺便提一句，一样的取消code）
}
}）;
 

但是，这两个按钮是当使用此code中的相同的颜色。我希望我的取消按钮不同的颜色比我保存。有没有办法做到这一点使用一些内置的jQuery的选择吗？我没有从文档太大帮助。

请注意，该取消按钮我创建一个pre定义的类型，但拯救我自己的定义。不知道这将会对问题的任何影响。

任何帮助将是AP preciated。谢谢你。

更新：共识是，有两条道路这里旅行：

1. 检查使用Firefox浏览器的HTML
   插件如萤火虫和注意事项
   CSS类的jQuery是
   施加到按钮时，采取
   在刺覆盖它们。的注意：
   我的HTML，使用两个按钮的
   相同的CSS类，并没有唯一
   身份证，所以这个选项了出去。的


2. 使用上对话框打开jQuery选择
   赶上我想要的按钮，
   和CSS类添加到它，然后。

我去了第二个选项，并用了jQuery find（）方法，因为我认为这是比使用比较合适：第一或：第一胎B / C，我想更改按钮并不一定是第一按钮在标记列。使用查找，我可以指定按钮的名称，并添加CSS的方式。在code我结束了同是如下：

  $ dialogDiv.dialog（{
的AutoOpen：假的，
模式：真实，
宽度：600，
可调整大小：假的，
\t纽扣： {
取消：功能（）{
                        //此处取消code
}，
保存：功能（）{
                        //保存code在这里
}
}，
        打开：功能（）{
            $（'。UI的对话框的buttonpane'）找到（'按钮：包含（取消）'）addClass（'cancelButtonClass'）;。
        }
关闭：函数（）{
//关闭code这里（顺便提一句，一样的取消code）
}
}）;
 

解决方案

我重新发布<一个href=\"http://stackoverflow.com/questions/5456605/how-to-give-css-class-to-the-ok-button-of-dialog-in-jquery/5456874#5456874\">my回答以一个类似的问题，因为没有人似乎这里给出它和它的更清洁，更简洁：

使用替代按钮属性语法：

  $ dialogDiv.dialog（{
    的AutoOpen：假的，
    模式：真实，
    宽度：600，
    可调整大小：假的，
    纽扣： [
        {
            文字：取消，
            阶级：cancelButtonClass'，
            点击：函数（）{
                //此处取消code
            }
        }，
        {
            文字：保存，
            阶级：saveButtonClass'，
            点击：函数（）{
                //保存code在这里
            }
        }
    ]
    关闭：函数（）{
        //关闭code这里（顺便提一句，一样的取消code）
    }
}）;
 

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)
	}
});

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:

1. 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.
2. Use a jQuery selector on dialog open to catch the button that I wanted, and add a CSS class to it then.

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:

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屋！