将类添加到jquery对话框按钮

时间:2009-09-24 13:36:46

标签: jquery css class

我想在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”类。

我该怎么做?

谢谢!

6 个答案:

答案 0 :(得分:53)

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

答案 1 :(得分:8)

我得到了解决方案,感谢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");

解决!

答案 2 :(得分:5)

对话框功能的 dialogClass 选项可用于为对话框本身指定css类。您可以为其指定一个唯一的类名,并使用此类名来获取对话框的任何子元素的引用。然后,使用选择器按位置或其包含的文本引用子按钮(使用前者可能更有效)。

答案 3 :(得分:1)

您是否尝试过addClass功能?

答案 4 :(得分:1)

有同样的问题。与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();
            }

答案 5 :(得分:-4)

.addClass函数