Значки диалоговых кнопок пользовательского интерфейса jQuery - PullRequest
Новая
       94

Значки диалоговых кнопок пользовательского интерфейса jQuery

53 голосов
/ 26 марта 2010

Можно ли добавить значки к кнопкам в диалоге jQuery UI? Я пытался сделать это так: 

$("#DeleteDialog").dialog({
    resizable: false,
    height:150,
    modal: true,
    buttons: {
        'Delete': function() {
            /* Do stuff */
            $(this).dialog('close');
        },
        Cancel: function() {
            $(this).dialog('close');
        }
    },
    open: function() {
        $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('ui-icon-cancel');
        $('.ui-dialog-buttonpane').find('button:contains("Delete")').addClass('ui-icon-trash');
    }
});

Селекторы в функции открытия работают нормально. Если я добавлю следующее «открыть»: 

$('.ui-dialog-buttonpane').find('button:contains("Delete")').css('color', 'red');

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

Edit:

Я сделал пару твиков к принятому ответу: 

var btnDelete = $('.ui-dialog-buttonpane').find('button:contains("Delete")');
btnDelete.prepend('<span style="float:left; margin-top: 5px;" class="ui-icon ui-icon-trash"></span>');
btnDelete.width(btnDelete.width() + 25);

При добавлении некоторого верхнего поля значок перемещается вниз, и создается впечатление, что он центрирован вертикально. Добавление 25 пикселей к ширине кнопки предотвращает перенос текста кнопки на вторую строку.

Ответы [ 12 ]

1 голос
/ 10 августа 2010

Просто обновление, так как я столкнулся с необходимостью сделать это сам.

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

Также в выбранном решении фактически отсутствует пара уже определенных классов CSS, которые могли бы решить проблему позиционирования.

Следующий код должен выполнить именно то, что было нужно в исходном вопросе, с немного большей точностью. Если вы хотите применить один и тот же значок корзины во всех диалоговых окнах с помощью кнопки «Удалить», изменение селектора $ ('# DeleteDialog'). Parent () на $ ('. Ui-dialog-buttonpane') позволит достичь этой цели: 

$('#DeleteDialog').parent()
    .find('button:contains("Delete")')
    .removeClass('ui-button-text-only')
    .addClass('ui-button-text-icon-primary ui-button-text-icon')
    .prepend('<span class="ui-button-icon-primary ui-icon ui-icon-trash"></span>');
1 голос
/ 11 июля 2010

назначить высоту для «.ui-dialog .ui-button» следующим образом: 

.ui-dialog .ui-button {
    height:36px;
}
.ui-icon-kl_exit {
    height:32px; 
    width:32px;
    display:block;
    background-image: url('../icons/exit32.ico');
}
Страница:
...