将CSS应用到jQuery对话框button

所以我现在有一个jQuery对话框有两个button:保存和closures。 我使用下面的代码创build对话框:

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

但是,使用此代码时,两个button都是相同的颜色。 我想我的取消button是一个不同于我的保存颜色。 有没有办法做到这一点使用一些内置的jQuery选项? 我没有从文档中获得很多帮助。

请注意,我正在创build的取消button是一个预定义的types,但是“保存”我正在定义自己。 不知道这是否会影响到这个问题。

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

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

  1. 使用像firebug这样的Firefox插件检查HTML,并注意jQuery应用于button的CSS类,并采取刺戳重写它们。 注意:在我的HTML中,两个button都使用了完全相同的CSS类,没有唯一的ID,所以这个选项已经不存在了。
  2. 在打开的对话框中使用jQueryselect器来捕捉我想要的button,然后添加一个CSS类。

我去第二个选项,并使用jQuery find()方法,因为我认为这比使用更合适:first或:first-child b / c我想更改的button不一定是第一个button标记。 使用find,我可以指定button的名称,然后添加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属性的语法:

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

您可以使用打开的事件处理程序来应用其他样式:

  open: function(event) { $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButton'); } 

我认为有两种方法可以处理:

  1. 如果两个button之间存在差异(类,ID等),使用类似于萤火虫的东西进行检查,并使用它来解决特定的button
  2. 使用类似于:第一个孩子来select例如第一个button和不同的样式

当我用对话框中的一个萤火虫查看源代码时,会出现如下所示的内容:

 <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"> <button class="ui-state-default ui-corner-all ui-state-focus" type="button">Send</button> <button class="ui-state-default ui-corner-all" type="button">Cancel</button> </div> 

所以我可以例如通过添加一些样式到.ui-state-focus (也许有一些额外的select器来确保我覆盖jquery的样式)来处理发送button。

顺便说一句,在这种情况下,我会select第二个选项,以避免焦点更改时出现问题。

你应该把“className”改成“class”

 buttons: [ { text: "Cancel", class: 'ui-state-default2', click: function() { $(this).dialog("close"); } } ], 

也许这样?

 $('.ui-state-default:first').addClass('classForCancelButton'); 

select具有angular色对话框的div,然后获取相应的button并设置CSS。

 $("div[role=dialog] button:contains('Save')").css("color", "green"); $("div[role=dialog] button:contains('Cancel')").css("color", "red"); 

为什么不只是检查生成的标记,请注意selectbutton上的类,并自己的样式?

还有一个简单的答案,用于定义只应用于特定button的特定样式,并且在声明对话框时可以让Jquery声明元素样式:

 id: "button-delete", text: "Delete", style: "display: none;", click: function () {} 

做完之后,这里是html显示的内容: 在这里输入图像说明

这样做可以让你设置它,但是以后使用jquery不一定很容易。

我build议你看看代码吐出的HTML,看看是否有唯一标识一个(或两个)button(可能是id或name属性)的方法,然后使用jQuery来select该项目并应用css类到它。

如果还在注意为您工作,请在页面样式表中添加以下样式

 .ui-widget-content .ui-state-default { border: 0px solid #d3d3d3; background: #00ACD6 50% 50% repeat-x; font-weight: normal; color: #fff; } 

它会改变对话框button的背景颜色。