In un sito dinamico o un CMS, per necessità o anche solo per offrire una funzionalità in più, possiamo prevedere di lasciare all’utente la possibilità di impostare il colore di un componente del sito web, ad esempio, il colore di sfondo del menu di navigazione.
Soprattutto se il cliente in questione è un professionista che vuole personalizzare un sito/servizio/prodotto in base ad una sua esigenza anche momentanea.
Vediamo come implementare un color picker utilizzando un plugin per jQuery.
Scaricate il plugin da questa pagina.
Dopo aver scompattato l’archivio nella directory del progetto, includete i files necessari per il funzionamento del color picker:
<link rel=”stylesheet” href=”css/colorpicker.css” type=”text/css” />
<link rel=”stylesheet” media=”screen” type=”text/css” href=”css/layout.css” />
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/colorpicker.js”></script>
<script type=”text/javascript” src=”js/eye.js”></script>
<script type=”text/javascript” src=”js/utils.js”></script>
<script type=”text/javascript” src=”js/layout.js?ver=1.0.2″></script>
Ora inserite nella pagina web un campo di testo e il codice js ricordandovi di settare l’identificatore univoco (l’ho evidenziato con colore rosso):
Color <input type=”text” maxlength=”6″ size=”6″ id=”cp” value=”ffffff” />
<script type=”text/javascript”>
$(‘#cp‘).ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
$(el).val(hex);
$(el).ColorPickerHide();
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
}
})
.bind(‘keyup’, function(){
$(this).ColorPickerSetColor(this.value);
});
</script>
Ecco il color picker in azione, potete visionarlo qui (per attivare il color picker basta cliccare sul campo di testo).
Infine un consiglio, una funzionalità del genere non la proponete mai a un cliente inesperto o con dubbi gusti grafici o ne combinerà “di tutti i colori” 😉
