jQuery minicolors para convertir tus elementos input html en pickers de color

DESCARGA : jQuery Minicolors

jQuery minicolors para convertir tus elementos input html en pickers de color, con solo unas cuantas lineas de código, esto le pondrá un toque especial a tus proyectos.

1.- Como primer paso tendremos que crear un archivo HTML e incluiremos el CDN de jQuery (https://code.jquery.com/jquery-3.2.1.js) y los archivos del plugin, tanto el archivo jquery.mincolors.js como el archivo jquery.mincolors.css, archivos que encontraras en la descarga de este plugin en la parte de arriba de este artículo.


<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="js/jquery.minicolors.js"></script>
<link href="css/jquery.minicolors.css" rel="stylesheet" type="text/css" />

2.- Como segundo paso crearemos los elementos HTML input para convertirlos en elementos selectores de color con la ayuda de jQuery minicolors, en este código utilizaremos 4 elementos ( 2 tipo text y 2 tipo hidden), además le pondremos valores iniciales a los inputs utilizando colores de inicio de selección, le pondremos nombre y un valor id.


<br/>
Inline en campo hidden (hex):<br/>
<input type="hidden" value="#0088cc" name="color0" id="c0"/>
<br/>
En campo hidden(hex):<br/>
<input type="hidden" value="#0088cc" name="color1" id="c1"/>
<br/>
En campo texto(hex):<br/>
<input type="text" value="#0088cc" name="color2" id="c2"/>
<br/>
En campo texto(rgb):<br/>
<input type="text" value="#0088cc" name="color3" id="c3"/>
<br/>

3.- Para el primer elemento html input, utilizaremos la referencia hacia el elemento html usando el id, incluiremos también un parámetro de configuración, en el caso de querer mostrar un pequeño cuadrado de color simplemente tienes que hacer referencia a un elemento hidden, puedes también incluir opciones en el plugin, basta con agregar entre llaves los valores requeridos, en este caso podrías consultar el final de la página que se encuentra en el siguiente enlace: http://labs.abeautifulsite.net/jquery-minicolors/#download 

 <script>
 $('#c0').minicolors({ inline:true});
 $('#c1').minicolors();
 $('#c2').minicolors({ animationEasing: 'swing'});
 $('#c3').minicolors({format: 'rgb'});
 </script>

Final de la implementación:

You may also like...