Icônes des boutons de la boîte de dialogue jQuery UI

Question

Est-il possible d'ajouter des icônes pour les boutons sur un jQuery UI Dialog? 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 open semble fonctionner correctement. Si j'ai ajouter la ligne suivante à "ouvrir":

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

puis je reçois un bouton Supprimer avec le texte en rouge. Ce n'est pas mauvais, mais j'aimerais vraiment que la petite poubelle de sprite sur le bouton Supprimer.

Edit:

J'ai fait une paire de réglages pour la accepté de répondre:

var btnDelete = $('.ui-dialog-buttonpane').find('button:contains("Delete")');
btnDelete.prepend('<span style="float:left; margin-top: 5px;" class="ui-icon ui-icon-trash"></span>');
btnDelete.width(btnDelete.width() + 25);

L'ajout de certains marge supérieure pousse l'icône vers le bas, de sorte qu'il ressemble il est centré verticalement. L'ajout de 25 px pour le bouton de largeur de garde le bouton de texte à partir d'habillage sur une deuxième ligne.

Answer 1

j'ai essayé ça et ça marche :)

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

Answer 2

Nativement pris en charge depuis l'interface utilisateur jQuery 1.10

À partir de la version 1.10.0 de jQuery UI, il est possible de spécifier proprement des icônes de bouton sans recourir aux gestionnaires d'événements open . La syntaxe est la suivante:

 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 .

Answer 3

Essayez cette ligne pour ajouter 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('<span style="float:left;" class="ui-icon ui-icon-trash"></span>');
 

Afin d'é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('<span class="ui-icon ui-icon-trash"></span>');
 

Answer 4

Vous pouvez aussi ajouter un identifiant ou un autre bouton attr à, comme ceci:

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

Answer 5

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