jQuery UI & WordPress – Le bouton sous toutes les coutures

Après avoir étudié comment intégrer jQuery UI dans votre projet WordPress, apprenons comment utiliser les boutons avec cette formidable bibliothèque.

REMARQUE : Sachez que l’importation d’une librairie complète pour 2, 3 boutons est à proscrire. Bien que mes exemples portent sur des problèmes simplistes, on utilisera plus souvent une libraire de cette envergure pour créer une interface utilisateur complète dont la création de boutons est une étape importante.

———

Le bouton de base

Pré-requis :

  • Un lien ou un bouton en HTML ;
  • Ajoutez un attribut class quelque soit la méthode utilisée (lien ou bouton) ;
<!-- lien -->
<a href="lien" class="button">Lien</a>
<!-- Bouton 1 -->
<input type="submit" class="button" value="Sauvegarder" />
<!-- Bouton 2 -->
<input type="submit" class="button" value="Sauvegarder" />

La classe sera récupérée dans notre code JavaScript pour identifier le bouton. Encore une fois jQuery UI fera le reste :

jQuery(function() {
	jQuery( '.button' ).button();
});

Vous devriez obtenir un bouton aux couleurs du thème jQuery UI de votre choix.

Le bouton avec une icône

Vous l’aurez sans doute remarqué lors de la sélection de votre théme, jQuery UI importe dans votre projet une série d’icône à tout faire.

Notez simplement qu’il est possible d’insérer ces icônes devant votre bouton. En voici la méthode.

Liste des icônes importez avec la librairie jQuery UI

Reprenez votre lien de tout à l’heure et ajoutez-y une classe de plus intitulée save. Imaginons que sur cette classe nous voulions insérer l’icône du « V ».

<!-- lien -->
<a href="lien" class="button save">Enregistrer</a>

Voici le code JavaScript correspondant :

jQuery(function() {
	jQuery( '.button' ).button();
// ---[ Save ]
	jQuery(function() {
		jQuery( '.save' )
		.button({
			icons: {
				primary: 'ui-icon-check' //ID de l’icône en forme de V
			},
		});
	});
});

Et voila le résultat ;

Sachez que vous pouvez ajouter également une 2e icône avec secondary. Celle-ci s’affichera après le texte de votre bouton.

Le bouton puce

Créez des puces sous forme de boutons rend le design de vos formulaires agréable à regarder. les choses vont se compliquer un petit peu dans le sens ou il nous faudra définir un conteneur.

Pré-requis :

  • Une liste de puces ;
  • Un conteneur de type <div> ;

Ajoutez un id à votre <div>, par exemple radio :

<div id="radio">

<label for="radio1">Puce 1</label>
<input type="radio" id="radio1" name="radio" />

<label for="radio2">Puce 2</label>
<input type="radio" id="radio2" name="radio" checked="checked" />

<label for="radio3">Puce 3</label>
<input type="radio" id="radio3" name="radio" />

</div>

Vous remarquerez que je n’ai mis à aucun endroit la classe button ou encore save.

L’attribut clé de ce code est bien l’id de la div. Passons au JavaScript :

$(function() {
		$( "#radio" ).buttonset();
	})

Résultat :

La fonction .buttonset de jQuery UI peut être utilisée dans un champ de boîte à cocher. Exactement de la même façon que précédemment.

Happy coding avec jQuery UI !

8 commentaires

  1. Regnareb

    Il va falloir m’expliquer pourquoi utiliser le Js quand le CSS est tout prêt pour ça et le fait mieux.
    Je ne suis pas contre le Js, au contraire, juste quand il n’y en a pas besoin et qu’il est utilisé à outrance, surtout quand ça amène à de mauvaises pratiques en HTML.

    Je ne veux pas passer pour un vieux barbu, mais pour un site un minimum sérieux, je ne me vois vraiment pas utiliser tout cela.

    1. Cybercraft auteur de l’article

      Je voulais faire un article sur jQuery UI par sur le CSS…

      La question n’est pas de choisir mais d’expliquer une méthode.

      Si j’avais voulu expliquer comment faire des boutons avec CSS, je l’aurais fait. Mais ce n’est pas l’objet du tuto. Mon but est de montrer TOUTES les possibilités de jQuery UI. Y compris les boutons

      Le jQuery, n’est en rien une mauvaise pratique… La preuve en est que WP intègre cette librairie à partir de la version 3.3.1.

      Pour créer ces boutons, le js push des classes CSS dans les balises html. La plus-values réside dans le fait que jQuery UI est optimisé pour un maximum d’affichage sur un maximum de navigateur. Donc tu n’as pas à te soucier du code CSS. jQuery le fait pour toi.

      Encore une fois, je ne prône pas l’une ou l’autre méthode… Je ne fait que décrire une possibilité

          1. vallsymachinant

            lol Trollage intensif ! Très bonnes explications, merci pour ces informations pratique !!

  2. Boris Delormas

    Je crois qu’on est tous d’accord pour dire qu’utiliser jQuery à des fins uniquement de création de boutons est une aberration. La question qu’on peut se poser plus que de critiquer les fondements de cet article c’est savoir pourquoi jQuery a intégré cette fonctionnalité dans jQuery UI ?

    Je pense que c’est lié justement au « UI ». C’est une librairie destinée à créer de l’interface utilisateur, à améliorer l’ergonomie et l’expérience utilisateur.

    Concernant la pertinence de l’article j’invite simplement Christopher à préciser en début d’article que cette technique ne justifie pas à elle seule l’utilisation de jQuery UI et doit s’intégrer uniquement dans une politique technique plus globale.

    1. vallsymachinant

      Il est évident que pour un simple menu utiliser jquery UI n’est pas justifié mais lorsque l’on parle d’une vraie application web, la cela deviens fortement intéressant.

      L’article ici présent est remplis d’informations pertinentes qui peuvent servir à une utilisation plus complexe de Jquery UI combiné à WordPress. Il est simplement illustré avec des exemples simplistes, ce qui peu faciliter la compréhension pour certains.

      Je ne le trouve pas « choquant » personnellement.

Laisser un commentaire

Thèmes & Plugins
Premium By WP Channel

WP Alacarte propose des produits et services de qualité
made in France pour la plateforme WordPress.

Tout est prêt pour créer votre site à la carte !

  • Thèmes et extensions premium
  • Facilité d’utilisation garantie
  • Temps de chargement optimisé
  • Personnalisation avancée
Découvrir

Rejoignez la communauté WordPress !

Faites partie de l’aventure en devenant membre d’une association WordPress. Conférences, ateliers, BarCamp, WordCamp… Venez
partager votre passion pour WordPress !

Aurélien DENIS,
président des associations WordPress Francophone et WPMX