将类添加到 jquery 对话框按钮答案

【问题标题】：Add class to jquery dialog buttons将类添加到 jquery 对话框按钮
【发布时间】：2010-12-01 02:23:36
【问题描述】：

我想在 jquery 对话框的按钮上添加 css 类。

这是我的代码：

$(document).ready(function(){
      $('#messageBox p').html('bla bla bla. Ok?'); 
      $('#messageBox').dialog({
        modal : true,
        buttons: {
          'Yes': function() {
            doSomething();
            $(this).dialog('close');
          }, 
          'No': function() {
            doAnotherThing();
            $(this).dialog('close');
          }
        }
      });
    });

例如，我想在“是”按钮上添加“.red”类。

我该怎么做？

谢谢！

【问题讨论】：

标签： jquery css class

【解决方案1】：

buttons: [
            {
               text: "Submit",
               "class": 'submit_class_name',
               click: function() {                     
                  $(this).dialog("close"); 
               }
            },
            {
               text: "Cancel",
               click: function() { 
                  $(this).dialog("close"); 
               }
            }
          ]

【讨论】：

这是最好的答案！注意：在 class 属性周围使用引号，在 iPad 上会引发错误（可能是因为 class 是保留（关键字）字）
在 IE8 中也有同样的错误。解决了"class" 而不是class

【解决方案2】：

感谢 Rich，我找到了解决方案：

$(document).ready(function(){
      $('#messageBox p').html('bla bla bla. Ok?'); 
      $('#messageBox').dialog({
        modal : true,
        dialogClass: 'dialogButtons',
        buttons: {
          'Yes': function() {
                doSomething();
                $(this).dialog('close');
          }, 
          'No': function() {
                doAnotherThing();
                $(this).dialog('close');
          }
        }
      });
    });
$("div.dialogButtons div button:nth-child(1)").addClass("oneCssClass");
$("div.dialogButtons div button:nth-child(2)").addClass("anotherCssClass");

解决了！

【讨论】：

拯救了我的一天！ :) 谢谢

【解决方案3】：

dialog 函数有一个dialogClass 选项，您可以使用该选项为对话框本身指定一个css 类。您可以给它一个唯一的类名，并使用这个类名来获取对对话框的任何子元素的引用。然后，使用选择器通过位置或包含的文本获取对子按钮的引用（使用前者可能更有效）。

【讨论】：

【解决方案4】：

你试过addClass函数吗？

【讨论】：

但是在哪里添加 addclass 函数呢？
和phoenix一样的答案...我可以把addClass函数放在哪里，因为按钮是由jquery对话框制作的，按钮没有ID。

【解决方案5】：

有同样的问题。与 nico 的解决方案非常相似，但在对话框的 open 函数中添加了样式：

open: function () {
                // add style to buttons (can't seem to do this via the button definition without breaking IE)
                $(".someDialog .ui-dialog-buttonset button:first").not(".buttonPrimary").addClass("buttonPrimary");
                $(".someDialog .ui-dialog-buttonset button:last").not(".buttonSecondary").addClass("buttonSecondary");
                $("#someDialog").focus();
            }

【讨论】：

【解决方案6】：

我遇到了类似的情况，我需要在显示对话框之前动态地为按钮添加一些样式。到达按钮并不是很简单，所以我想出了一个非常简单的到达按钮的方法。在创建对话框按钮的过程中，我只是给了它们一个“id”，然后我可以使用通常的 jquery 选择器获得对它们的引用...$("#btnDelete").addClass("disabled")

buttons: [{
        id: "btnDelete",
        text: "Delete",
        click: function () {
            Delete();
            $(this).dialog('close');
        }
    }, {
        id: "btnSave",
        text: "Save",
        click: function () {
            Save();
            $(this).dialog('close');
        }
    }, {
        id: "btnCancel",
        text: "Cancel",
        click: function () {
            $(this).dialog("close");
        }
    }]

【讨论】：

【解决方案7】：

.addClass 函数

【讨论】：

是的，我知道这个功能......但我不知道如何在我的情况下使用它。