Plugin JQuery : creer un color picker avec Farbtastic

plugin JQuery : farbtastic

 

Farbtastic (un nom original pour un plugin JQuery) permet de créer un color picker. Un color picker est une roue chromatique (comme vu ci-dessus) qui est rattaché à un champ texte. Lorsque l’on clique sur une couleur particulière, le code héxa (pour le web donc) de la couleur est envoyé dans le champs texte voulu. Il peut être très pratique pour tout ce qui est éditeur en ligne. Il est téléchargable ici (deux démos sont comprises dans le .zip).

La mise en place de ce plugin JQuery est très simple, il suffit d’appeler le fichier JavaScript du plugin ainsi que le fichier CSS (après avoir importer le fichier de JQuery bien sûr).

1
2
<script type="text/javascript" src="farbtastic.js"></script>
<link rel="stylesheet" href="farbtastic.css" type="text/css" />

Il faut ensuite prévoir l’emplacement de la roue chromatique dans la page (pas trop loin d’un formulaire, car le code héxa de la couleur sera envoyé dans un input).

1
2
<form><input type="text" id="color" name="color" value="#123456" /></form>
<div id="colorpicker"></div>

Et enfin, il faut initialiser le plugin avec le bon sélecteur (correspondant à l’id du bloc qui va contenir le color picker, « #colorpicker »)  et lui associer un champ input (ayant pour id « color »).

1
2
3
  $(document).ready(function() {
    $('#colorpicker').farbtastic('#color');
  });

J’aime assez la souplesse (possibilité de rattacher un color picker à plusieurs champs texte) et sa simplicité à mettre en place quelques secondes suffisent. Et graphiquement il tient largement la route !

Ce contenu a été publié dans développement web, avec comme mot(s)-clé(s) , , . Vous pouvez le mettre en favoris avec ce permalien.

2 reponses a Plugin JQuery : créer un color picker avec Farbtastic

  1. oscar974 dit :

    Salut à vous !
    Je me demande si certains sont au courant que le plug-in ne fonctionne pas coorectement avec IE8. Moi j’obtiens un problème d’affichage.
    Peut-être quelqu’un a une idée là-dessus ?
    Merci bien et à bientôt.

  2. Kuba dit :

    Arltices like this are an example of quick, helpful answers.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *