Lo que debes hacer es poner un cuadro de texto de forma que cuando un usuario haga click en dicho cuadro se muestre el ColorPicker, es decir, la paleta de colores.
Para conseguirlo, debes hacer lo siguiente:
1. Incluir el css y el javascript de la paleta de colores y de jquery en el head de la página:
Código HTML :
<head>
...
<link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/colorpicker.js"></script>
</head>
2. Crear el textbox que contendrá el código del color seleccionado:
Código HTML :
<input type="text" maxlength="6" size="6" id="colorpickerField1" value="00ff00" />
* En value se indica el color inicial a mostrar.
3. Crear un script a continuación para que cuando se haga click en el textbox se muestre la paleta de colores. Además, debe modificar el valor del textbox cuando se selecciona el color.
Código Javascript :
<script>
$('#colorpickerField1').ColorPicker({onSubmit: function(hsb, hex, rgb, el) {
$(el).val(hex);
$(el).ColorPickerHide();
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
}
});
</script>
Te pongo un ejemplo con todo junto para que veas un ejemplo muy sencillo
Código HTML :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/colorpicker.js"></script>
</head>
<body>
<input type="text" maxlength="6" size="6" id="colorpickerField1" value="00ff00" />
<script>
$('#colorpickerField1').ColorPicker({onSubmit: function(hsb, hex, rgb, el) {
$(el).val(hex);
$(el).ColorPickerHide();
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
}
});
</script>
</body>
</html>
Espero que te aclare algo
