Creiamo un color picker per il nostro CMS
Molti CMS e molti altri sistemi per la creazione semplificata di contenuti per il Web, mettono a disposizione dei loro utilizzatori una serie di strumenti tra cui, appunto, il color picker.
Si tratta di un tool che permette di generare il codice esadecimale di un colore (che generalmente viene inserito automaticamente all'interno di un campo input di un form) semplicemente cliccando su una delle diverse tonalità proposte.
Di seguito un esempio:
Iniziamo da un po di stile che assegna delle caratteristiche estetiche alla tabella:
<style type="text/css">
td
{
font: normal 0px;
width: 20px;
height: 20px;
cursor: pointer;
}
</style>
Impostiamo l'elemento "cella" in modo da rappresentare un quadrato col puntatore tipo link al passaggio del mouse. Si consiglia comunque di assegnare una classe alle celle interessate.
Passiamo al Javascript, il cui compito è quello di creare la tabella, colorarla, impostare uno pseudo-link su ogni cella e creare la funzione che popoli la casella di testo.
Ne segue il codice:
<script type="text/javascript">
var color = new Array();
color[0] = "FFFFFF";
color[1] = "000000";
color[2] = "FF0000";
color[3] = "0000FF";
color[4] = "FFFF00";
color[5] = "00FFFF";
color[6] = "CCCCCC";
color[7] = "FF6600";
with (document)
{
write("<table cellpadding='1' cellspacing='0'");
write("border='1'><tr>");
var count = 0;
var index = 0;
for (index = 0; index < color.length; index++)
{
if (count == 4)
{
write("</tr><tr>");
count = 0;
}
write("<td bgcolor='#" + color[index]);
write("' onclick='PickColor(\"" + color[index] + "\")'>");
write(" </td>");
count++;
}
write("</tr></table>");
}
function PickColor(ColorToPick)
{
document.colors.color.value = "#" + ColorToPick;
}
</script>
Il funzionamento è semplice: utilizzo un array in cui memorizzare i colori; poi creo la tabella dei colori paginandola a colonne; in fine creo la funzione che assegna il codice esadecimale scelto alla casella di testo.
Concludo col codice del modulo HTML:
<form name="colors"> <input type="text" name="color"> </form>
