JQuery диалоговое окно сохранить отменить стиль кнопки

Question

Я использую диалоги jquery ui в своем приложении. Как по-разному стилизовать кнопки «Сохранить» и «Отмена» в диалоговом окне jquery? Таким образом, «Сохранить» является более привлекательным, чем «Отмена». Я мог бы использовать гиперссылку для «Отмена», но как мне разместить ее на той же панели кнопок?

Answer 1

Вот как добавить пользовательские классы в jQuery UI Dialog (Версия 1.8 +):

$('#foo').dialog({
    'buttons' : {
        'cancel' : {
            priority: 'secondary', class: 'foo bar baz', click: function() {
                ...
            },
        },
    }
}); 

Answer 2

В jQueryUI 1.8.9 работает className вместо classes.

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

Answer 3

Я использую jQuery UI 1.8.13, и следующая конфигурация работает так, как мне нужно:

var buttonsConfig = [
    {
        text: "Ok",
        "class": "ok",
        click: function() {
        }
    },
    {
        text: "Annulla",
        "class": "cancel",
        click: function() {
        }
    }
];

$("#foo").dialog({
    buttons: buttonsConfig
// ...

ps: не забудьте заключить "класс" в кавычки , потому что это зарезервированное слово в js!

Answer 4

Прошло много времени с тех пор, как этот вопрос был опубликован, но следующий код работает во всех браузерах (обратите внимание, что ответ MattPII работает в FFox и Chrome, он выдает ошибки скрипта в IE).

$('#foo').dialog({
    autoOpen: true,
    buttons: [
    {
        text: 'OK',
        open: function() { $(this).addClass('b') }, //will append a class called 'b' to the created 'OK' button.
        click: function() { alert('OK Clicked')}
    },
    {
        text: "Cancel",
        click: function() { alert('Cancel Clicked')}
    }
  ]
});

Answer 5

Начиная с версии 1.8.16 jquery ui, как я это получил.

$('#element').dialog({
  buttons: { 
      "Save": {  
          text: 'Save', 
          class: 'btn primary', 
          click: function () {
              // do stuff
          }
      }
});

Answer 6

Эти решения очень хороши, если у вас есть только один диалог на странице одновременно, однако, если вы хотите стилизовать несколько диалогов одновременно, попробуйте:

$("#element").dialog({
    buttons: {
        'Save': function() {},
        'Cancel': function() {}
    }
})
.dialog("widget")
.find(".ui-dialog-buttonpane button")
.eq(0).addClass("btnSave").end()
.eq(1).addClass("btnCancel").end();

Вместо того, чтобы глобально выбирать кнопки, он получает объект виджета и находит его панель кнопок, а затем индивидуально стилизует каждую кнопку. Это избавляет от боли, когда у вас есть несколько диалогов на одной странице

Answer 7

после просмотра некоторых других тем Я предложил это решение для добавления значков к кнопкам в диалоговом окне подтверждения, которое, кажется, хорошо работает в версии 1.8.1 и может быть изменено для выполнения других стилей. :

$("#confirmBox").dialog({
    modal:true,
    autoOpen:false,        
    buttons: { 
        "Save": function() { ... },                
        "Cancel": function() { ... }
        }
});

var buttons = $('.ui-dialog-buttonpane').children('button');
buttons.removeClass('ui-button-text-only').addClass('ui-button-text-icon');

$(buttons[0]).append("<span class='ui-icon ui-icon-check'></span>");
$(buttons[1]).append("<span class='ui-icon ui-icon-close'></span>");

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

Answer 8

Мне пришлось использовать следующую конструкцию в jQuery UI 1.8.22:

var buttons = $('.ui-dialog-buttonset').children('button');
buttons.removeClass().addClass('button');

Это удаляет все форматирование и применяет сменный стиль по мере необходимости.
Работает в большинстве основных браузеров.

Answer 9

У меня версия JQuery UI 1.8.11, и это мой рабочий код. Вы также можете настроить его высоту и ширину в зависимости от ваших требований.

$("#divMain").dialog({
    modal:true,
    autoOpen: false,
    maxWidth: 500,
    maxHeight: 300,
    width: 500,
    height: 300,
    title: "Customize Dialog",
        buttons: {
            "SAVE": function () {
                //Add your functionalities here
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        },
        close: function () {}
});

Answer 10

Эта функция добавит класс к каждой кнопке в вашем диалоговом окне. Затем вы можете стилизовать (или выбрать с помощью jQuery) как обычно:

$('.ui-dialog-buttonpane :button').each(function() { 
    $(this).addClass($(this).text().replace(/\s/g,''));
});