Accueil > Programmation > javascript > Des plugins jQuery colorPicker
Des plugins jQuery colorPicker
lundi 29 octobre 2012, par
Pour un projet perso, j’ai dû choisir un sélecteur de couleur. Je me suis naturellement tourné vers les plugins de mon framework javascript préféré.
Voici le résultat de mes recherches.
eyecon.ro colorpicker
Démo
Code
Inclusions (header de la page) :
<link rel="stylesheet" media="screen" type="text/css" href="js/eyecon/css/colorpicker.css" />
<script type="text/javascript" src="js/eyecon/js/colorpicker.js"></script>
Attachement à un input :
$(document).ready(function(){
//---------------------------- Eyecon ----------------------------------------
$("#eyecon1").ColorPicker();
$("#eyecon2").ColorPicker({livePreview: false,
onSubmit: function(hsb, hex, rgb, el) {
$(el).val(hex);
$(el).ColorPickerHide();
}
});
$("#eyecon3").ColorPicker({
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
},
onChange: function (hsb, hex, rgb) {
$("#eyecon3").val('#' + hex);
},
onHide: function(){}
}).bind('keyup', function(){
$(this).ColorPickerSetColor(this.value);
});
});
Informations complémentaires
URL d’origine : http://www.eyecon.ro/colorpicker/
Ce plugin n’est plus maintenu depuis 2009. Il y a un bug sous chrome :
le clic dans la partie gauche ne fonctionne pas toujours.
Farbastic color picker
Démo
Code
Inclusions (header de la page) :
<script type="text/javascript" src="js/farbtastic/farbtastic.js"></script>
<link rel="stylesheet" href="js/farbtastic/farbtastic.css" type="text/css" />
Rattachement à un input :
$(document).ready(function(){
var f = $.farbtastic('#farbasticPicker');
var p = $('#farbasticPicker').css('opacity', 0.25);
var c = $('#farbasticContainer');
var selected;
$('.farbasticText')
.each(function () { f.linkTo(this); $(this).css('opacity', 0.75); })
.focus(function() {
if(this.value==''){
this.value='#ffffff';
}
if (selected) {
$(selected).css('opacity', 0.75).removeClass('colorwell-selected');
}
f.linkTo(this);
p.css('opacity', 1);
$(selected = this).css('opacity', 1).addClass('colorwell-selected');
p.css('left', this.left);
p.css('top', this.top+this.height);
var inputLeft = $(this).attr('left');
var inputLeft = $(this).attr('top');
c.hide().insertAfter($(this)).show(300);
});
});
Informations complémentaires
URL d’origine : acko.net
Ce plugin n’est plus maintenu depuis 2009.
Il est un peu compliqué à mettre en place si on a besoin de plusieurs colorpickers.
J’ai trouvé la doc en anglais un peu difficile à comprendre.
Claviska MiniColors (abeautifulsite.net)
Démo
Code
Inclusions (header de la page) :
<script type="text/javascript" src="js/claviska/jquery.miniColors.js"></script>
<link type="text/css" rel="stylesheet" href="js/claviska/jquery.miniColors.css" />Rattacher à un input :
$("#claviska").miniColors();Informations complémentaires
URL d’origine : Claviska chez GitHub
Très rapide à mettre en place, ce plugin propose plein d’options à l’initialisation.
jPicker
Démo
Code
Inclusions (header de la page) :
<link rel="Stylesheet" type="text/css" href="js/jpicker-1.1.6/css/jpicker-1.1.6.min.css" />
<link rel="Stylesheet" type="text/css" href="js/jpicker-1.1.6/jPicker.css" />
<script src="js/jpicker-1.1.6/jpicker-1.1.6.min.js" type="text/javascript"></script>Rattacher à un input :
$("#jpicker").jPicker({images: {clientPath: 'js/jPicker-1.1.6/images/'}});Informations complémentaires
URL d’origine : Digital Magic Productions
Ce plugin est complet mais lourd à l’exécution. L’option clientPath est obligatoire si le plugin n’est pas installé à la racine du site.
Le color picker de la web agency Intelliance
Démo
Pas de démo (pas compatible avec cette version de jQuery).
Code
Inclusions (header de la page) :
<script src="js/intelliance/js/jquery/ifx.js" type="text/javascript"></script>
<script src="js/intelliance/js/jquery/idrop.js" type="text/javascript"></script>
<script src="js/intelliance/js/jquery/idrag.js" type="text/javascript"></script>
<script src="js/intelliance/js/jquery/iutil.js" type="text/javascript"></script>
<script src="js/intelliance/js/jquery/islider.js" type="text/javascript"></script>
<script src="js/intelliance/js/jquery/color_picker/color_picker.js" type="text/javascript"></script>
<link href="js/intelliance/js/jquery/color_picker/color_picker.css" rel="stylesheet" type="text/css">
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<link rel="stylesheet" href="js/intelliance/js/jquery/color_picker/color_picker-ie6.css" type="text/css">
<![endif]-->
<!--[if gte IE 7]>
<link rel="stylesheet" href="js/intelliance/js/jquery/color_picker/color_picker-ie7.css" type="text/css">
<![endif]-->Rattacher à un input :
$.ColorPicker.init();Informations complémentaires
URL d’origine : www.intelliance.fr
Ce plugin ne fonctionne pas avec les dernières versions de jQuery. De plus, il nécessite trop (à mon goût) de plugins annexes pour fonctionner. De toutes façons, il ressemble beaucoup à jPicker.
