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

Ответ 1

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

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

Ответ 2

В jQueryUI 1.8.9 работает className, а не classes.

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

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

Ответ 4

Прошло некоторое время, так как этот вопрос был опубликован, но следующий код работает во всех браузерах (обратите внимание, что при работе с MattPII в FFox и Chrome он выдает ошибки script в 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')}
    }
  ]
});

Ответ 5

Как показано в jQuery ui версии 1.8.16 ниже, как я его работаю.

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

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

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

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

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

Ответ 8

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

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

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

Ответ 9

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

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

Ответ 10

У меня версия 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 () {}
});

Ответ 11

проверить jquery ui 1.8.5 он доступен здесь http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js и у него есть новая кнопка для реализации диалога ui

Ответ 12

Я просмотрел HTML-код, созданный диалоговым окном UI. Он отображает панель кнопок следующим образом:

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
     <button type="button" class="ui-state-default ui-corner-all">Delete all items in recycle bin</button>
     <button type="button" class="ui-state-default ui-corner-all different" style="border: 1px solid blue;">Cancel</button>
</div>

Добавление класса к кнопке Отмена должно быть простым.

$('. ui-dialog-buttonpane: last-child'). css ('background-color', '#ccc');

Это сделает кнопку "Отмена" немного серой. Вы можете стилизовать эту кнопку, как вам нравится.

В приведенном выше коде предполагается, что кнопка "Отмена" является последней. Убедительным способом сделать это будет

$('.ui-dialog-buttonpane :button')
    .each(
        function()
        { 
            if($(this).text() == 'Cancel')
            {
                //Do your styling with 'this' object.
            }
        }
    );