jQuery UI Button : buttonset de radio/checkbox avec seulement des icônes

Bookmark and Share
Lundi 9 janvier 2012
Posté par Gilles Felix

jQuery UI Button : buttonset de radio/checkbox avec seulement des icônes
Voici un petit billet pour faire profiter d'une astuce pour le widget jQuery UI Button : créer un buttonset (regroupement de boutons comme sur l'image illustrant ce billet) basé sur des inputs radio (ou checkbox)

Si vous lisez attentivement la documentation et les exemples du widget Button de jQuery UI, vous saurez très facilement créer un buttonset à partir d'une liste d'inputs radio ou checkbox. Techniquement, le widget récupère les LABEL associés aux INPUT pour créer les BUTTONS. L'avantage de passer par des radio ou des checkbox est que le widget gère l'état on / off du boutton en fonction de l'attribut checked de l'INPUT.

Dans un autre exemple, vous apprenez à créer des bouttons avec un ou deux icônes, avec ou sans texte.

Oui, mais vous ce que vous voulez, c'est un groupe de boutons basés sur des radio ou des checkbox ET représentés seulement par des icônes. Et là, pas d'exemple disponible.

J'ai d'abord essayé de mettre les icônes directement dans les LABEL, via un tag IMG ou via un SPAN avec la classe CSS ui-icon. Mais, le résultat n'était pas convainquant : les boutons étaient plus gros qu'à la normale.

J'ai essayé de simuler l'effet radio (ou checkbox) avec un boutton classique et en forçant la classe CSS ui-state-active sur le bouton actif. Mais, le widget, dans les cas non radio ou checkbox, enlève la classe ui-state-active sur le mouseout.

J'ai donc mis le nez dans le code du widget pour voir comment il marchait. C'est du bel ouvrage !! Dans la partie spécifique aux buttonset, j'ai remarqué que le widget cherchait tous les :button, :submit, :reset, :checkbox, :radio, a, :data(button) contenus dans l'élément englobant. Ensuite, pour chacun, il vérifiait s'il avait déjà été transformé en ui-button. Si oui, il le rafraichissait, si non, il l'initialisait. BINGO !

La voilà ma solution : d'abord initialiser un à un mes inputs radio en passant les bons paramètres et seulement ensuite initialiser le buttonset.

//En partant du principe que le suffixe de l'icône à afficher est contenu dans la valeur de chaque radio

// On cherche tous les radio contenu dans un élément servant de container au groupement de boutons
$('#buttonset').find(':radio')

// Boucle sur les radios
.each(function() {
    var input = $(this);
    // Initialisation du bouton : 1 icône mais le label non affiché
    input.button({
        text : false,
        icons : {
             primary: 'ui-icon ui-icon-' + input.val()
        }
    });
})

// On revient au groupement de boutons et on l'initialise
.end()
.buttonset();

Et le résultat (vous pouvez faire joujou avec sur JSBin).

Vous pourrez également voir le résultat en live d'ici quelques jours / heures dans la démo de Novius OS, application Médiathèque.

Aucun commentaire
Laissez votre commentaire :