Colores en un input html con JQuery Palette Color Picker, sin duda el usar el elemento input tipo color, no es suficiente ya que en ocasiones la presentación del selector no es muy amigable y no esta de acuerdo a nuestro diseño, es por eso que aquí tienes un plugin para implementar en esa aplicación,sitio html o portal que estas creando.
jQuery Pallete Color Picker tiene la facultad de restringir o definir los colores que utilizarías, puedes ver el ejemplo en uso: https://htmlpreview.github.io/?https://raw.githubusercontent.com/carloscabo/jquery-palette-color-picker/master/demo.html
A continuación se presenta la implementación de este plugin, lo único que tienes que hacer es lo siguiente:
1.- incluir los estilos (css) y los archivos javascript(js).
<link rel="stylesheet" href="src/palette-color-picker.css"> <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> <script src="src/palette-color-picker.js"></script>
2.- Incluir los elementos html (input) para convertir en color
<!-- <input type="text" name="UNIQUE_NAME"> --> <input type="text" name="colorin">
3.- El uso basico quedaria de la siguiente forma:
$(document).ready(function(){
$('[name="colorin"]').paletteColorPicker();
});
4.- Adicional a esto puedes agregarle opciones al plugin de la siguiente forma:
$(‘[name=”colorin”]’).paletteColorPicker({ colors: [
{“primary”: “#E91E63”},
{“primary_dark”: “#C2185B”},
{“primary_light”: “#F8BBD0”},
{“accent”: “#CDDC39”},
{“primary_text”: “#212121”},
{“secondary_text”: “#727272”},
{“divider”: “#B6B6B6”}
]
});
Con estos simples pasos tienes un resultado que puede sacarte de apuros, en general trabajar con el plugin dejara un poco más presentable tu proyecto web que estés realizando.
The post Colores en un input html con JQuery Palette Color Picker appeared first on Develoteca.