ColorPicker

ColorPicker est un outil permettant à l'internaute de sélectionner une couleur parmis une palette riche de plus de 4000 couleurs. Ecrit uniquement en JavaScript, ColorPicker peut être intégré à n'importe quelle page web, le tout très simplement et rapidement.

Fonctionnalités :
  • interface sobre et clair.
  • choix de la couleur dans une palette riche de plus de 4000 couleurs (basé sur le code de Jean-Luc Antoine).
  • peut être utilisé un nombre infini de fois dans chaque formulaire.
  • le code généré est valide XHTML.
  • l'objet colorPicker n'utilise pas de fenêtre type windows, aucun souci avec les anti-popup.
  • la palette des couleurs produite par l'objet colorPicker n'est pas une image, le code issu pour la générer est très léger
  • une couleur par défaut peut être utilisée par l'objet colorPicker, il suffit de la préciser par sa forme CSS.
  • création automatisée des champs cachés à transmettre par le formulaire.
  • vous pouvez spécifier si vous souhaitez utiliser le signe "#" dans les balises input pour le retour de valeur.
  • colorPicker est écrit 100% en javascript, de fait, il tourne sur n'importe quel navigateur, sans module additionnel.

Démonstration

ColorPicker simple :

Couleur par défaut précisée dans la balise style :

Couleur par défaut précisée via une classe CSS :

Exemple de code

<!-- Deux fichiers à inclure dans votre page -->
<link rel="stylesheet" type="text/css" media="all" href="colorPicker.css"/> 
<script src="colorPickerLib.js" type="text/javascript"></script>

<!-- Déclaration d'un objet ColorPicker : -->
<div class="colorPickerElement" id="myColorPicker1"></div>

<!-- Analyse de la page et création des objets ColorPicker -->
<script type="text/javascript">
colorPickerLib.attachColorPickerBehavior();
</script>

Notes développeurs

  • Création d'un nouvel objet colorPicker par déclaration d'une balise "div" avec la classe "colorPickerElement".
  • L'élément div créé doit obligatoirement posséder un identifiant.
  • Le nom de l'élément input créé pour le retour de valeur au formulaire est l'identifiant de l'objet colorPicker. L'identifiant de cet élément est de la forme id="colorPicker:colorPickerID".

Pré-requis

Créé dans le cadre d'un projet global, ColorPicker nécessite la présence de quelques fonctions très communes et présentes dans la plupart des projets web 2.0 :

  • fonctions addEvent... : gestionnaire d'évènements
  • getCssProperty() : pour retrouver les propriétés CSS décrites dans la collection ComputedStyle

Ces fonctions, non intégrées à la classe de bases pour éviter les redondances de code, sont néanmoins fournies dans le fichier additionnel [necessaryFunc.js] du téléchargement.

Téléchargement

License

Creative Commons License Cette création est mise à disposition sous un contrat Creative Commons. Cela signifie que vous êtes libre de reproduire, distribuer et communiquer cette création au public. Si vous disposez d'un site internet, il n'est nullement obligatoire mais serait grandement appréciable de faire une référence à la présente page.