27

jPicker, Color Picker en jQuery

August 8, 2010

Publicidad / Advertisement

jPicker es un magnífico plugin en jQuery de aspecto profesional y muy completo para integrar en nuestros proyectos web. Ha sido desarrollado por Chris Tillman.

jPicker plugin by Chris Tillman

De entre todos los que me he encontrado en Internet, éste es el que más me ha gustado para integrarlo en el editor de Layout de SYROPE Light.

jPicker es un plugin muy completo, de aspecto profesional al estilo Photoshop. Puede ser usado asociado a un elemento HTML o abierto como popup.

En cuanto a los modos de color, soporta todos los tipos  (Hue, Saturation, Brightness, Red, Green, and Blue), además de soportar transparencias y color traslucido.

Una de las características más interesantes es el manejo de los eventos ( callbacks ) para las acciones de Confirmar y Cancelar. Soportado y testado para todos los navegadores (Chrome, Firefox, IE5.5+, Safari y Opera ).

Llamada a la funcion y argumentos disponibles:

jPicker(settings, commitCallback)

El parámetro ‘settings’ define las variables de configuración para personalizar el aspecto del plugin:

El parámetro ‘commitCallback’ define las funciones que ejecutan las acciones de los botones OK y Cancel. Es una función de la siguiente forma:

function(jPicker.Color color, object context){...}

Ejemplo de uso con Callbacks:

CÓDIGO JS EN LA PÁGINA HTML DONDE SE QUIERE MOSTRAR EL PLUGIN:

<script type="text/javascript">
  $(document).ready(
    function()
    {
      $('#capa_colorpicker').jPicker(
        {
          window: { expandable: true },
          color:  { alphaSupport:true, active:new $.jPicker.Color({ahex:'99330099'}) }
        },
        // Event Callback Ok Buttom
        function(color, context)
        {
          var all = color.val('all');
          document.getElementById('capa_color_modificado').style.color = '#' + all.hex;
        }
      );
    });

El HTML donde se pinta el plugin:

<span id="capa_colorpicker"></span>

 

El plugin jPicker se puede descargar aqui:

http://code.google.com/p/jpicker/

Para todos los detalles de configuración, consultar la página y documentación oficial de jPicker:

http://www.digitalmagicpro.com/jPicker/

Si te interesa el tema, no puedes dejar de visitar este enlace:

http://wiki.jqueryui.com/ColorPicker

Publicidad / Advertisement

 

Topics: Desarrollo web, Internet, jquery, Proyectos Web, SYROPE CMS | No Comments »

Comments