Boîte de dialogue modale de l'interface utilisateur jQuery: les icônes des boutons n'apparaissent pas

Question

Ma boîte de dialogue modale fonctionne parfaitement (ce qui signifie que je peux ajuster chaque option), sauf que l'option des icônes de bouton n'a aucun effet. Voici le code que je utilise pour générer la boîte de dialogue:

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

J'ai regardé toutes les questions pertinentes Stack Overflow je pourrais trouver - par exemple this one. Mis à part l'attachement d'un élément au bouton ouvert, je ne sais pas comment résoudre ce problème. Lorsque je crée des éléments ailleurs dans le document et que je leur donne la classe appropriée, les icônes s'affichent correctement.

est ici le HTML jQuery génère pour le bouton lorsque la boîte de dialogue est ouvert:

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

Je suppose qu'il devrait y avoir autre chose que « [object Object] dans les icônes d'attributs. Pourquoi cela arrive-t-il? J'utilise jQuery UI v. 1.12.0 et jQuery v. 3.0.0., Et je n'utilise pas Bootstrap.

Answer 1

jQuery UI 1.12 introduit un new syntax for button icons, que je lui ai confirmé résout ce problème (voir this jsFiddle). Actuellement, il n'accepte pas les options obsolètes; un PR has been submitted pour résoudre ce problème. Voir my bug report pour plus de détails. Le code suivant fonctionne avec jQuery UI 1.12 et 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

Apparemment, le problème est un bogue dans jquery-ui 1.12.0. Si vous substituez 1.11.4 à 1.12.0 dans votre violon, le problème disparaît.

J'ai exécuté votre code (le code que vous avez publié ci-dessus, pas le code dans votre violon) dans mon propre environnement de test, et tout a bien fonctionné. (J'ai téléchargé 1.11.4 en mai, quand c'était la dernière version stable.) Il semble que la méthode button() ne soit pas appelée quand dialog() est appelée. Comme vous le supposez correctement, il ne devrait pas y avoir un object Object dans l'élément icons. Mon code de bouton ressemble à ceci:

<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> 

On dirait que cela est peut-être un "vrai bug véritable" dans jQuery-UI 1.12.0. :)

Editer: ressemble en fait à une "véritable fonctionnalité" dans jQuery-UI 1.12.0, avec une foule d'autres changements, dont certains cassent la compatibilité avec les versions précédentes. Voir le lien "nouvelle syntaxe" de Harpo. Toute personne utilisant des menus (en particulier les menus, les anciens ne fonctionneront plus), les radiobuttons/cases à cocher, ou quelques autres choses, voudra le lire. Pour obtenir deux icônes sur un bouton, il est toujours possible avec la nouvelle syntaxe, mais vous ne pouvez pas le faire en utilisant le paramètre buttons dans la méthode dialog(). Au lieu de cela, vous devrez faire le bouton de la manière standard, en ajoutant des travées pour les icônes. (Le document de mise à niveau indique que vous pouvez simplement placer le deuxième intervalle d'icônes dans le balisage, et utiliser le paramètre icon pour ce qui était l'icône principale, mais je n'ai pas réussi à faire fonctionner cela dans ce contexte.) pour le balisage:

<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> 

Et puis:

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

Answer 3

S'il vous plaît un coup d'oeil c'est pour l'exemple, nous pouvons faire quelque chose à ce ..

style pour faire des changements dans ce ...

Merci ... :)