Primero el código del ejemplo y a continuación su explicación:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="jquery.colorpicker.css" type="text/css"/>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.colorpicker.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#picker').colorpicker({
size: 20,
label: 'Color: ',
hide: false
});
});
</script>
</head>
<body>
<label>Selecciona el color:</label>
<select id="picker">
<option value="FFFFFF">FFFFFF</option>
<option value="FFDFDF">FFDFDF</option>
<option value="FFBFBF">FFBFBF</option>
<option value="FF9F9F">FF9F9F</option>
<option value="FF7F7F">FF7F7F</option>
<option value="FF5F5F">FF5F5F</option>
<option value="FF3F3F">FF3F3F</option>
<option value="FF1F1F">FF1F1F</option>
<option value="FF0000">FF0000</option>
<option value="DF1F00">DF1F00</option>
<option value="C33B00">C33B00</option>
<option value="A75700">A75700</option>
<option value="8B7300">8B7300</option>
<option value="6F8F00">6F8F00</option>
<option value="53AB00">53AB00</option>
<option value="37C700">37C700</option>
<option value="1BE300">1BE300</option>
<option value="00FF00" selected="selected">00FF00</option>
<option value="00DF1F">00DF1F</option>
<option value="00C33B">00C33B</option>
<option value="00A757">00A757</option>
<option value="008B73">008B73</option>
<option value="006F8F">006F8F</option>
<option value="0053AB">0053AB</option>
<option value="0037C7">0037C7</option>
<option value="001BE3">001BE3</option>
<option value="0000FF">0000FF</option>
<option value="0000df">0000df</option>
<option value="0000c3">0000c3</option>
<option value="0000a7">0000a7</option>
<option value="00008b">00008b</option>
<option value="00006f">00006f</option>
<option value="000053">000053</option>
<option value="000037">000037</option>
<option value="00001b">00001b</option>
<option value="000000">000000</option>
</select>
</body>
</html>
Seguidamente, aplicamos el plugin a nuestro elemento select con id picker, estableciendo como valores de configuración del plugin su tamaño, el texto de la etiqueta que va a mostrar y si se muestra o no el select original. Las opciones de configuración del plugin son:
Parámetro | Descripción | Ejemplo |
---|---|---|
size | Tamaño en pixeles | 20 |
scount | Colores a mostrar por fila | 6 |
label | Etiqueta del picker | Color: |
hide | Dede ocultarse el select original? | false |
Tras esto únicamente tenemos que agregar a nuestra página el select con id picker y las distintos valores/option de colores que se van a mostrar.
El ejemplo en funcionamiento:
Puedes descargar los archivos desde aqui: jquery.colorpicker.js jquery.colorpicker.css
No hay comentarios :
Publicar un comentario