web-dev-qa-db-fra.com

Icônes du bouton de dialogue jQuery UI

Est-il possible d'ajouter des icônes aux boutons d'une boîte de dialogue 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 de la fonction ouverte semblent bien fonctionner. Si j'ajoute ce qui suit à "ouvrir":

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

puis j'obtiens un bouton Supprimer avec du texte rouge. Ce n'est pas mal, mais j'aimerais vraiment que cette petite poubelle Sprite soit également sur le bouton Supprimer.

Modifier:

J'ai apporté quelques modifications à la réponse acceptée:

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 d'une marge supérieure pousse l'icône vers le bas, de sorte qu'elle semble centrée verticalement. L'ajout de 25 px à la largeur du bouton empêche le texte du bouton de passer sur une deuxième ligne.

jqueryjquery-uijquery-ui-dialog
53
Cory Grimster

Essayez cette ligne pour ajouter l'icône de la corbeille au bouton Supprimer. 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'empêcher l'icône d'apparaître 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>');
18
enduro

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

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

Prise en charge native depuis jQuery UI 1.10

À partir de jQuery UI version 1.10.0, il est possible de spécifier proprement les icônes de bouton sans recourir aux 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.

35
Jon

vous pouvez également ajouter un identifiant ou un autre attr au bouton, comme ceci:

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

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

Voici ce que j'utilise. Attribuez un ID au bouton d'intérêt lors de la définition de la boîte de dialogue initiale:

    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"} });
2
hoyt1969

attribuer la hauteur au ".ui-dialog .ui-button" comme suit:

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

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

J'ai plusieurs boîtes de dialogue qui ont toutes deux le même bouton de fermeture, il est donc utile de parler de la façon dont on placerait les icônes directement dans la boîte de dialogue que vous cherchez à affecter, juste au cas où vous voudriez une icône sur un bouton dans une boîte de dialogue différente qui contient le même texte.

De plus, la solution sélectionnée manque en fait quelques classes CSS déjà définies qui résoudraient le problème de position.

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

$('#DeleteDialog').parent()
    .find('button:contains("Delete")')
    .removeClass('ui-button-text-only')
    .addClass('ui-button-text-icon-primary ui-button-text-icon')
    .prepend('<span class="ui-button-icon-primary ui-icon ui-icon-trash"></span>');
1
lsuarez

Ou si vous ne souhaitez pas affecter d'autres boîtes de dialogue,

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

J'ai couru dans le même numéro. Il semble que jquery stocke le texte dans un attribut appelé "texte" dans le bouton lui-même, et non en tant que 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"
            }
        ]
    });
1
Jareish

Que diriez-vous d'une approche basée sur la classe?

Dans votre _layout.cshtml fichier mettre quelque chose comme ceci:

<script type="text/javascript">
    $(function () {
        stylizeButtons();
    }

function stylizeButtons(parent) {
    if (parent == undefined) {
        parent = $("body");
    }
    // Buttons with icons
    $(parent).find(".my-button-add").button({ icons: { primary: "ui-icon-plusthick"} });
    $(parent).find(".my-button-cancel").button({ icons: { primary: "ui-icon-closethick"} });
    $(parent).find(".my-button-delete").button({ icons: { primary: "ui-icon-closethick"} });
    $(parent).find(".my-button-submit").button({ icons: { primary: "ui-icon-check"} });
    $(parent).find(".my-button-export").button({ icons: { primary: "ui-icon-suitcase"} });
    $(parent).find(".my-button-search").button({ icons: { primary: "ui-icon-search"} });
    $(parent).find(".my-button-editicon").button({ icons: { primary: "ui-icon-pencil"} });
    $(parent).find(".my-button-edit").button({ icons: { primary: "ui-icon-pencil"} });
    $(parent).find(".my-button-back").button({ icons: { primary: "ui-icon-arrowthick-1-w"} });
    $(parent).find(".my-button-previous").button({ icons: { primary: "ui-icon-carat-1-w"} });
    $(parent).find(".my-button-next").button({ icons: { primary: "ui-icon-carat-1-e"} });
    $(parent).find(".my-button-history").button({ icons: { primary: "ui-icon-bookmark"} });
    $(parent).find(".my-button-reports").button({ icons: { primary: "ui-icon-calculator"} });
}
</script>

Ensuite, dans le fichier où vous créez la boîte de dialogue, 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 n'avez jamais à vous fier à la recherche de texte, et cela nécessite une quantité minimale de code dans votre boîte de dialogue. Je l'utilise dans toutes mes applications pour appliquer un style/des icônes jquery UI aux boutons simplement en leur donnant une classe.

1
Pandincus

Selon option Dialogue> boutons documentation vous pouvez passer un objet ou un tableau d'options; ce dernier vous permet de personnaliser les boutons:

boutons

Type: Objet 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'on clique sur le bouton associé.
  • Tableau : chaque élément du tableau doit être un objet définissant les attributs, les propriétés et les gestionnaires d'événements à définir sur le bouton. De plus, une clé de icons peut être utilisée pour contrôler l'option des icônes 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" },
    // attributes
    "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;
}
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog" title="Confirmation">
  <p>Delete all files from your hard drive?</p>
</div>
1
Salman A