Icônes du bouton de dialog de l’interface utilisateur jQuery

Est-il possible d’append des icons aux boutons d’un dialog jQuery UI? J’ai essayé de le faire de cette façon:

$("#DeleteDialog").dialog({ resizable: false, height:150, modal: true, buttons: { 'Delete': function() { /* Do stuff */ $(this).dialog('close'); }, Cancel: function() { $(this).dialog('close'); } }, open: function() { $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('ui-icon-cancel'); $('.ui-dialog-buttonpane').find('button:contains("Delete")').addClass('ui-icon-trash'); } }); 

Les sélecteurs dans la fonction ouverte semblent fonctionner correctement. Si j’ajoute les éléments suivants pour “ouvrir”:

 $('.ui-dialog-buttonpane').find('button:contains("Delete")').css('color', 'red'); 

alors je reçois un bouton Supprimer avec du texte rouge. Ce n’est pas mal, mais j’aimerais vraiment que cette petite corbeille apparaisse également sur le bouton Supprimer.

Modifier:

J’ai apporté deux modifications à la réponse acceptée:

 var btnDelete = $('.ui-dialog-buttonpane').find('button:contains("Delete")'); btnDelete.prepend(''); btnDelete.width(btnDelete.width() + 25); 

L’ajout d’une marge supérieure pousse l’icône vers le bas, il semble donc qu’elle soit centrée verticalement. L’ajout de 25 pixels à la largeur du bouton empêche le texte du bouton de s’inscrire sur une deuxième ligne.

Essayez cette ligne pour append l’icône de la corbeille au bouton de suppression. Le sprite doit être dans un élément séparé.

 $('.ui-dialog-buttonpane').find('button:contains("Delete")').prepend(''); 

Pour éviter que l’icône n’apparaisse en haut du bouton:

 $('.ui-dialog-buttonpane') .find('button:contains("Delete")') .removeClass('ui-button-text-only') .addClass('ui-button-text-icon-primary') .prepend(''); 

J’ai essayé ça et ça marche 🙂

 [....] open: function() { $('.ui-dialog-buttonpane'). find('button:contains("Cancel")').button({ icons: { primary: 'ui-icon-cancel' } }); [....] 

Supporté en mode natif depuis l’interface utilisateur jQuery 1.10

À partir de la version 1.10.0 de l’interface utilisateur jQuery, il est possible de spécifier clairement les icons des boutons sans avoir à utiliser open gestionnaires d’événements open . La syntaxe est:

 buttons: [ { text: "OK", icons: { primary: "ui-icon-check" } }, { text: "Cancel", icons: { primary: "ui-icon-closethick" } } ] 

Il est également possible de spécifier une icône secondary .

Voyez-le en action .

Vous pouvez également append un identifiant ou un autre atsortingbut au bouton, comme ceci:

 buttons:[ { text: "Close", id: "closebtn", click: function() { $(this).dialog("close"); } } ], open: function() { $("#closebtn").button({ icons: { primary: "ui-icon-close" } }); } 

Cette version fonctionne sans avoir à se soucier du texte dans les boutons

 open: function() { $(this).parent().find('.ui-dialog-buttonpane button:first-child').button({ icons: { primary: 'ui-icon-circle-close' } }); $(this).parent().find('.ui-dialog-buttonpane button:first-child').next().button({ icons: { primary: 'ui-icon-circle-check' } }); } 

Voici ce que j’utilise Atsortingbuez un identifiant au bouton concerné lors de la définition du dialog initial:

  buttons: [ { id: "canxButton", text: "Cancel", icons: { primary: "ui-icon-cancel" }, click: function () { ... 

Ensuite, vous pouvez changer le texte / l’icône comme ceci:

 $("#canxButton").button("option", "label", "Done"); $("#canxButton").button({ icons: {primary: "ui-icon-close"} }); 

Juste une mise à jour depuis que je suis tombé sur le besoin de le faire moi-même.

J’ai plusieurs boîtes de dialog qui ont le même bouton de fermeture, il est donc utile de parler de la manière dont les icons sont placées directement dans la boîte de dialog que vous souhaitez affecter, au cas où vous souhaiteriez le même texte

En outre, il manque à la solution sélectionnée deux classes CSS déjà définies qui corrigeraient le problème de position.

Le code suivant devrait accomplir exactement ce qui était souhaité dans la question originale, avec un peu plus de précision. Si vous vouliez appliquer la même icône de corbeille à toutes les boîtes de dialog avec un bouton Supprimer, changer le sélecteur $ (‘# DeleteDialog’). Parent () en $ (‘. Ui-dialog-buttonpane’) permettrait d’atteindre cet objective:

 $('#DeleteDialog').parent() .find('button:contains("Delete")') .removeClass('ui-button-text-only') .addClass('ui-button-text-icon-primary ui-button-text-icon') .prepend(''); 

Ou si vous ne voulez pas affecter d’autres boîtes de dialog,

 open: function() { $(this).parent().find('.ui-dialog-buttonpane button:contains("Cancel")').button({ icons: { primary: 'ui-icon-circle-close' } }); $(this).parent().find('.ui-dialog-buttonpane button:contains("Ok")').button({ icons: { primary: 'ui-icon-circle-check' } }); } 

atsortingbuez la hauteur au “bouton .ui-dialog .ui” comme suit:

 .ui-dialog .ui-button { height:36px; } .ui-icon-kl_exit { height:32px; width:32px; display:block; background-image: url('../icons/exit32.ico'); } 

J’ai couru dans le même problème. Il semble que jquery stocke le texte dans un atsortingbut appelé “text” dans le bouton lui-même, et non sous forme de texte à l’intérieur du bouton.

Je l’ai résolu comme ceci:

  $dialog.dialog({ resizable:false, draggable:false, modal:true, open:function (event, ui) { $(this).parents('.ui-dialog').find('.cancel.ui-button').text('Cancel'); //or you could use: $(this).parents('.ui-dialog').find('button[text="Cancel"]').text('Cancel'); $(this).parents('.ui-dialog').find('.add.ui-button').text('OK'); }, buttons:[ { text:"OK", click:function () { }, "class":"add" }, { text:"Cancel", click:function () { }, "class":"cancel" } ] }); 

Qu’en est-il d’une approche basée sur les classes?

Dans votre fichier _layout.cshtml , mettez quelque chose comme ceci:

  

Ensuite, dans le fichier où vous créez la boîte de dialog, faites quelque chose comme ceci:

 $("#doStuff-dialog").dialog({ title: "Do Some Stuff", modal: true, buttons: [ { text: "Yes", class: "my-button-submit", click: function () { $(this).dialog("close"); } }, { text: "No", class: "my-button-cancel", click: function () { $(this).dialog("close"); } } ], open: function () { stylizeButtons($("#doStuff-dialog").parent()); } }); 

Ensuite, vous ne devez jamais compter sur la recherche de texte, et cela nécessite une quantité minimale de code dans votre boîte de dialog. Je l’utilise tout au long de mes applications pour appliquer le style / les icons de l’interface utilisateur jquery aux boutons en leur donnant simplement une classe.

Selon la documentation de l’ option Dialog> buttons , vous pouvez passer un object ou un tableau d’options; ce dernier vous permet de personnaliser les boutons:

boutons

Type: object ou tableau
Par défaut: []

Plusieurs types pris en charge:

  • Objet : les clés sont les étiquettes des boutons et les valeurs sont les rappels lorsque l’utilisateur clique sur le bouton associé.
  • Tableau : chaque élément du tableau doit être un object définissant les atsortingbuts, les propriétés et les gestionnaires d’événements à définir sur le bouton. De plus, une touche d’ icons peut être utilisée pour contrôler l’option des icons du bouton, et une clé de showText peut être utilisée pour contrôler l’option de texte du bouton.
 $(function() { var buttons = []; buttons.push({ text: "Yes", // icon options icons: { primary: "ui-icon-check" }, // atsortingbutes "class": "hawt-button", title: "Aye!" }); buttons.push({ text: "Yes to All", icons: { secondary: "ui-icon-check" } }); buttons.push({ text: "Please", icons: { primary: "ui-icon-notice" }, // text options showText: false }); buttons.push({ text: "Cancel", icons: { secondary: "ui-icon-close" }, // properties disabled: true }); $("#dialog").dialog({ width: "auto", buttons: buttons }); }); 
 @import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css"); .ui-button.hawt-button { color: hotpink; } 
   

Delete all files from your hard drive?