Модальное диалоговое окно jQuery UI: значки кнопок не отображаются

Question

Мой модальный диалог работает отлично (имеется в виду, что я могу настроить каждый параметр), за исключением того, что параметр значков кнопок не действует. Вот код, который я использую для создания диалога:

$('#alert_div')
    .attr("title", "Delete all instances?")
    .text("Are you sure you want to delete all instances of this event between the specificed dates?  This cannot be undone.")
    .dialog({
        modal: true,
        draggable: false,
        position: { my: "top", at: "center", of: window },
        buttons: [
            {
                text: "No",
                icons: { primary: "ui-icon-check" },
                click: function() {
                    $(this).dialog('close');
                    console.log('Clicked no.');
                }
            },
            {
                text: "Yes",
                click: function () {
                    $(this).dialog('close');
                    console.log('Clicked yes');
                }
            }
        ]
    });

Я рассмотрел каждый соответствующий вопрос переполнения стека, который мог найти, например, этот. Помимо прикрепления элемента к кнопке open, я не знаю, как это решить. Когда я создаю элементы в другом месте документа и назначаю им соответствующий класс, значки отображаются правильно.

Вот HTML, который jQuery генерирует для кнопки при открытии диалога:

<div class="ui-dialog-buttonset"><button type="button" icons="[object Object]" class="ui-button ui-corner-all ui-widget">OK</button></div>

Я предполагаю, что в атрибуте icons должно быть что-то кроме '[object Object]. Почему это происходит? Я использую jQuery UI v. 1.12.0 и jQuery v. 3.0.0., И я не использую Bootstrap.

Answer 1

В jQuery UI 1.12 появился новый синтаксис для значков кнопок, который, как я подтвердил, исправляет эту проблему (см. этот jsFiddle). В настоящее время он не принимает устаревшие параметры; PR был представлен, чтобы исправить это. Смотрите мой отчет об ошибке для деталей. Следующий код работает с jQuery UI 1.12 и jQuery 3.1.0:

$("#alert_div")
.attr("title", "Error")
.text("Please choose a calendar and enter both start and end dates.")
.dialog({
    modal: true,
    draggable: false,
    resizable: false,
    position: { my: "top", at: "top", of: window },
    buttons: [{
        text: "OK",
        icon: "ui-icon-check",
        click: function() {
            $(this).dialog("close");
        }
    }]
});

Answer 2

Видимо, проблема в баге в jquery-ui 1.12.0. Если вы замените 1.11.4 на 1.12.0 в своей скрипке, проблема исчезнет.

Я запустил ваш код (код, который вы опубликовали выше, а не код в скрипке) в моей собственной тестовой среде, и все работало нормально. (Я скачал 1.11.4 в мае, когда это была последняя стабильная версия.) Кажется, что button() метод не вызывается, когда dialog() называется. Как вы правильно догадываетесь, не должно быть object Object в icons элемент. Мой код кнопки выглядит так:

<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icons" role="button">
    <span class="ui-button-icon-primary ui-icon ui-icon-check"></span>
    <span class="ui-button-text">No</span>
    <span class="ui-button-icon-secondary ui-icon ui-icon-circle-check"></span>
</button>

Похоже, что это "настоящая настоящая ошибка" в jQuery-UI 1.12.0.:)

Редактировать: похоже, что на самом деле это "настоящая подлинная функция" в jQuery-UI 1.12.0, наряду с множеством других изменений, некоторые из которых нарушают совместимость с предыдущими версиями. Смотрите ссылку "новый синтаксис" Гарпо. Любой, кто использует меню (особенно меню, старые больше не будут работать), радиокнопки / флажки или несколько других вещей, захочет прочитать его.

Что касается получения двух значков на кнопке, это все еще возможно с новым синтаксисом, но вы не можете сделать это с помощью buttons параметр в dialog() метод. Вместо этого вам нужно будет сделать кнопку стандартным способом, добавив пролеты для значков. (Документ об обновлении говорит, что вы можете просто поместить второй диапазон значков в разметку и использовать icon параметр для того, что раньше было основным значком, но я не смог заставить это работать в этом контексте.) Итак, для разметки:

<div id="alert_div">
    <button id="okButton">
        <span class="ui-icon ui-icon-check"></span>
        Ok
        <span class="ui-icon ui-icon-circle-check"></span>
    </button>
</div>

А потом:

$('#alert_div').dialog({
    open: function(e, ui) {
        $('#okButton')
        .button()
        .on('click', function() {
            $(this).dialog('close');
        });
    }
});

Answer 3

Пожалуйста, посмотрите это для примера, мы можем сделать что-нибудь для этого..

использовать стиль, чтобы внести в него изменения...

Спасибо...:)