it-swarm.com.ru

диалог JQuery

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

47
Sabya

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

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

В jQueryUI 1.8.9 работает использование className вместо classes.

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

Я использую 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!

16
daveoncode

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

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

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

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

$("#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
Angry Dan

посмотрев на некоторые другие темы я придумал это решение, чтобы добавить значки к кнопкам в диалоге подтверждения, который, кажется, хорошо работает в версии 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>");

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

4
paul

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

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

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

2
JonnyDotNet

У меня есть версия 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 () {}
});
1
Willy David Jr

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

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

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

0
Ionut Popa