jQuery UI: Диалоговое моделирование кнопки

Question

jQuery UI: Диалоговое моделирование кнопки

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

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

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

11

jquery html css jquery-ui

задан Peter Bridger 18 March 2010 в 10:13

3 ответа

Другие вопросы по тегам:

jquery html css jquery-ui

Похожие вопросы:

score 1 · Answer 1

Да, вы можете перезаписать классы 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 для доступных классов диалоговых окон

score 11 · Answer 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 панели кнопок, а затем искать отдельные кнопки в родительском элементе.

score 3 · Answer 3

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

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

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

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