Кнопки диалога jQuery Ui, Как добавить класс? - PullRequest
Новая
       32

Кнопки диалога jQuery Ui, Как добавить класс?

50 голосов
/ 15 июля 2011

Я нашел этот ответ в другой теме.

Как добавить несколько кнопок в диалоговом окне Jquery UI?

Используя этот синтаксис, как добавить класск определенной кнопке? 

 $("#mydialog").dialog({
      buttons: {
        'Confirm': function() {
           //do something
           $(this).dialog('close');
        },
        'Cancel': function() {
           $(this).dialog('close');
        }
      }
    });

Ответы [ 5 ]

84 голосов
/ 15 июля 2011

Вы можете добавить класс к кнопке в диалоге ... 

$('#mydialog').dialog({
  buttons:{
    "send":{
      text:'Send',
      'class':'save'
    },
    "cancel":{
      text:'Cancel',
      'class':'cancel'
    }
  });

Я думаю, что это будет работать для вас. и вы можете найти больше ответов здесь .

49 голосов
/ 15 июля 2011

Не похоже, что есть отличный способ сделать это через API, однако вы можете добавить классы в обработчик событий для create: 

$("#dialog").dialog({
    buttons: {
        'Confirm': function() {
            //do something
            $(this).dialog('close');
        },
        'Cancel': function() {
            $(this).dialog('close');
        }
    },
    create:function () {
        $(this).closest(".ui-dialog")
            .find(".ui-button:first") // the first button
            .addClass("custom");
    }
});

Если вам нужна вторая кнопка, вы можете использовать: 

$(this).closest(".ui-dialog").find(".ui-button").eq(1).addClass("custom") // The second button

Ключ - $(this).closest(".ui-dialog").find(".ui-button"), который будет выбирать кнопки в вашем диалоге.После этого вы можете применить любой селектор, который вы хотите (включая :contains(...), который может быть полезен, если вы хотите выбрать кнопку на основе ее текста вместо порядка).

Вот пример: http://jsfiddle.net/jjdtG/

Также обратите внимание, что CSS-селектор для стилей, которые вы хотите применить, должен быть более конкретным, чем встроенные селекторы jQueryUI, чтобы применить стиль.

41 голосов
/ 17 июля 2014

Надеюсь, это поможет! 

$("#mydialog").dialog({
          buttons: {
            'Confirm': function() {
               //do something
               $(this).dialog('close');
            },
            "Cancel": {
                    click: function () {
                        $(this).dialog("close");
                    },
                    text: 'Cancel',
                    class: 'custom-class'
                }
          }
        });
7 голосов
/ 15 июля 2011

Использовать обработчик открытого события: 

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

Чисто, просто, кусок торта!

2 голосов
/ 11 июня 2018

Благодаря LintonB вы можете добавить все свойства, прикрепленные к кнопке, такие как стиль, идентификатор и т. Д. ... 

dialog_options.buttons = {
  'Modify': {
    click: function() {

      $(this).dialog('close');

      if (inputs.phone !== '') {
        inputs.phone.focus();
        inputs.phone[0].value = "";
      }
    },
    class: 'btn btn-labeled btn-warning',
    style: 'margin-right: 30px;',
    id: 'modificationId'
  },
  'Keep': {
    click: function() {
      $(this).dialog('close');

      _this.validatePhone(i);

    },
    class: 'btn btn-labeled btn-warning',
    id: 'conserverId'
  }
};
...