Пользовательский интерфейс jQuery: стилизация кнопки диалога

Есть ли простой способ применить CSS/значки к модальным кнопкам в модальном диалоговом окне jQuery UI?

Если я включаю HTML для отображения значка с текстом кнопки, он отображает HTML как текст, а не визуализирует код.

Я предполагаю, что могу написать jQuery, чтобы найти кнопку и перезаписать HTML с тем, что я хочу, но я надеюсь, что там будет проще более прямой путь.

Ответы

Ответ 1

Я могу видеть его довольно старый вопрос, но вы можете сделать это сейчас гораздо лучше в пользовательском интерфейсе jQuery, просто добавьте свойства "class" или "style" к объекту кнопки следующим образом:

$("#id-dialog").dialog({
    modal: true,
    buttons: [
        { text: "Save", click: function () { alert("save"); }, class:"sampleClass1", style:"color:Red" },
        { text: "Cancel", click: function () { alert("close"); ;}, class:"sampleClass2"}
    ]
});

Ответ 2

Вот что я сейчас использую для наших проектов:

$("#id-dialog").dialog({
        modal: true,
        buttons: {
            'Login': logIn,
            Cancel: logOut
        },
        open: function() {
            $buttonPane = $(this).next();
            $buttonPane.find('button:first').addClass('accept').addClass('ui-priority-primary');
            $buttonPane.find('button:last').addClass('cancel').addClass('ui-priority-secondary');                        
        }
    });

Первая и последняя работа в этом случае, так как есть только две кнопки. Вы можете использовать: nth-child (index), если у вас более двух кнопок.

Другой способ сделать это - обратиться к родительскому элементу, который включает в себя как элемент div div, так и элемент div buttonpane, а затем искать отдельные кнопки в родительском элементе.

Ответ 3

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

$('.ui-dialog-buttonpane').children('button')[1]

Я застрял, пытаясь использовать его поначалу, но получил его работу после того, как заметил, что это не вернет объект DOM класса jquery; он возвращает html, поэтому вам нужно вставить его внутри оператора jquery для его использования. Например -

var button1 = $('.ui-dialog-buttonpane').children('button')[1];
$(button1).removeClass('ui-button-text-only').addClass('ui-button-text-icon');

Ответ 4

Да, вы можете перезаписать классы модального диалога css в соответствии с вашими потребностями. Например, вы создаете диалог с указанием своего пользовательского класса:

$("#id-dialog").dialog({ 
            dialogClass: "loadingScreenWindow",
            ...

И затем в css:

/* hide the title bar on the loading screen */ 
.loadingScreenWindow .ui-dialog-titlebar {
  display: none;
}

Смотрите http://docs.jquery.com/UI/Dialog#theming для выбранного стиля диалога