Добавление клавиш в диалоговом окне jquery

Я хочу добавить класс css на кнопки диалогового окна jquery.

Вот мой код:

$(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" на мою кнопку "да".

Как я могу это сделать?

Спасибо!

Ответ 1

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

Ответ 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

Здесь есть опция dialogClass функции dialog, которую вы можете использовать для указания класса css для самого диалога. Вы можете дать ему уникальное имя класса и использовать это имя класса, чтобы получить ссылку на любые дочерние элементы диалогового окна. Затем используйте селектор, чтобы либо получить ссылку на дочерние кнопки по положению, либо по содержащемуся в нем тексу (возможно, более эффективно использовать первое).

Ответ 4

Вы пробовали функцию addClass?

Ответ 5

Была такая же проблема. Очень похоже на решение nico, но добавьте стиль в открытую функцию в диалоговом окне:

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

Функция

.addClass