jQuery UI Dialog Icônes de Bouton

Essayer cette ligne pour ajouter l'icône de la corbeille pour le supprimer bouton. 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 de prévenir l'icône qui apparaît sur le haut de la touche:

$('.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>');

Pris en charge nativement depuis jQuery UI 1.10

À partir de jQuery UI version 1.10.0, il est possible à proprement spécifier les icônes de bouton, sans avoir recours à open des gestionnaires d'événements. 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 un secondary icône.

Le voir en action.

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

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

J'ai plusieurs boîtes de dialogue que les deux ont le même bouton fermer, donc il est utile de parler de la façon dont on pourrait placer des icônes directement sur la boîte de dialogue, vous êtes à la recherche d'affecter, juste au cas où vous auriez besoin d'un icône sur un bouton dans une autre boîte de dialogue qui contient le même texte.

Également la solution retenue est pas un couple de déjà défini des classes CSS qui permettrait de résoudre la question 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 avez voulu appliquer la même icône de la corbeille pour toutes les boîtes de dialogue avec un bouton de Suppression, la modification de l' $('#DeleteDialog').parent() sélecteur $('.ui-dialog-buttonpane') permettrait d'atteindre 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>');

attribuer hauteur ".l'interface utilisateur boîte de dialogue .interface utilisateur-bouton", comme suit:

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

Quelle est la classe de base de l'approche?

Dans votre _layout.cshtml fichier mettre quelque chose comme ce qui suit:

<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 dans lequel vous créez le dialogue, faire 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());
}
});

Alors vous n'aurez jamais à s'appuyer sur la recherche de texte, et il demande un minimum de code dans votre boîte de dialogue. J'utilise ce tout au long de mes applications pour appliquer jquery UI style/icônes de boutons juste en leur donnant une classe.