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'); 
       } 
      } 
     ] 
    }); 

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

Вот HTML JQuery создает для кнопки при открытии диалога:

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

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

Answer 1

JQuery UI 1.12 ввел new syntax for button icons, который я подтвержденного исправляет эту проблему (см this jsFiddle). В настоящее время он не принимает устаревшие параметры; a PR has been submitted, чтобы исправить это. См. my bug report. Следующий код работает с 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(). Как вы правильно догадались, в элементе icons не должно быть object Object. Мой код кнопки выглядит следующим образом:

<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

Пожалуйста, посмотрите это для примера, мы можем сделать любую вещь к нему ..

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

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