elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Aporte] JQuery: Color Picker
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Aporte] JQuery: Color Picker  (Leído 3,112 veces)
AFelipeTrujillo

Desconectado Desconectado

Mensajes: 160



Ver Perfil WWW
[Aporte] JQuery: Color Picker
« en: 8 Enero 2011, 18:46 pm »

JQuery: Color Picker

Introducción

Dando vueltas por un foro me recomendaron un plugin bastante atractivo para desplegar una paleta de colores bastante amigable al usuario usuario su nombre es Color Picker, esta escrita para JQuery y su integración es bastante sencilla como veremos a continuación. Su pagina oficial es http://www.eyecon.ro/colorpicker/ y podrán encontrar una descripción detallada del plugin, con su respectiva documentación y con algunos ejemplos de implementación.

Contenido

Color Picker es un selector de colores que maneja tres formatos de codificación RGB, HSB y Hexadecimal, cuando insertamos el plug a alguna etiqueta del HTML por medio de los selectores de jQuery, este nos desplegara un interfaz intuitiva utilizada en varios editores de imágenes o herramientas semejantes.

Implementación

Para implementar el plug, debemos llamar los siguientes códigos js y css

Código
  1. <link href="css/colorpicker.css" type="text/css" rel="stylesheet"></link>
  2. <script src="jquery.js"></script>
  3. <script type="text/javascript" src="js/colorpicker.js"></script>

Invocación

Como he comentado en artículos anteriores, la invocación de este plug se hace por medio de un selector, de la siguiente forma:

Código
  1. $('mi selector').ColorPicker(options);

Ejemplo

Código
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.    <head>
  5.        <title>jQuery Picker</title>
  6.        <link href="css/colorpicker.css" type="text/css" rel="stylesheet"></link>
  7.        <script src="jquery.js"></script>
  8.        <script type="text/javascript" src="js/colorpicker.js"></script>
  9.        <script>
  10.            $(function(){
  11.                $("#colorpickerHolder").ColorPicker({
  12.                    flat:true,    //Con esto evitamos que el plug no se llamado por algun evento
  13.                    color: "#000", //Color por defecto
  14.                    onShow: function(){ //Una vez se carga toda la vista, se llama a este Evento
  15.                        //CODE
  16.                    },
  17.                    onChange: function(){ //Evento que controla el cambio de color
  18.                        //CODE
  19.                    },
  20.                    onBeforeShow: function(){
  21.                        //CODE
  22.                    },
  23.                    onHide: function(){
  24.                        //CODE
  25.  
  26.                    },
  27.                    onSubmit: function(){
  28.                        //CODE
  29.                    }
  30.                });
  31.            })
  32.        </script>
  33.    </head>
  34.    <body>
  35.        <div id="colorpickerHolder"></div>
  36.    </body>
  37. </html>


Para aterrizar mejor el uso del plug, daré un ejemplo claro y conciso del manejo de este recurso.

Conclusión

Color Picker, presenta un interfaz liviana, su programación es demasiado sencilla y le ofrecerá un estilo verdaderamente elegante en sus aplicaciones futuras, es una herramienta que debemos tener en cuenta.

[FUENTE]
[EJEMPLO FUNCIONANDO]


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
[Aporte] Lightbox y JQuery
Desarrollo Web
AFelipeTrujillo 0 2,989 Último mensaje 22 Junio 2010, 23:41 pm
por AFelipeTrujillo
[Aporte] JQuery
Desarrollo Web
AFelipeTrujillo 4 4,477 Último mensaje 4 Enero 2011, 14:43 pm
por AFelipeTrujillo
Color picker para programadores
Foro Libre
.... 0 2,581 Último mensaje 20 Abril 2011, 01:00 am
por ....
[SOURCE-CODE] Color.NET - Color Picker
.NET (C#, VB.NET, ASP)
**Aincrad** 8 4,666 Último mensaje 21 Noviembre 2018, 05:14 am
por **Aincrad**
[Source-Code] - Color Picker (Versión Cutre)
.NET (C#, VB.NET, ASP)
**Aincrad** 0 2,044 Último mensaje 25 Diciembre 2018, 03:01 am
por **Aincrad**
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines