¿Cómo cierra el selector de color de Iris cuando hace clic fuera de él?

3 minutos de lectura

avatar de usuario
David Gard

estoy usando el iris colour picker en un complemento de WordPress. Puedo hacer que se muestre y luego mostrar el valor en el que se hizo clic en la entrada asociada muy bien, sin embargo, hay un problema…

¡Entonces no puedo deshacerme de la caja! ¿Hay alguna manera de hacer que el cuadro desaparezca cuando hace clic fuera de él?

estoy invocando iris usando esta simple llamada –

jQuery(document).ready(function($){
    $('.colour-picker').iris();
});

El sentido común me dice que debería poder pasar esto como una opción al .iris() función para esta necesidad específica, pero no puedo encontrar ninguna referencia a tal opción en el documentos.

El armario que he encontrado es que puedes llamar a un hide método, pero todo lo que enumera es $(element).iris('hide');sin ninguna explicación de cómo vincularlo a la entrada específica que invocó iris en el primer paso, o cómo detectar si el usuario ha hecho clic fuera de iris

¿Alguien usa iris y saber cómo puedo lograr lo que estoy tratando de hacer? Gracias.

Adicional – Aquí hay un violín js que demuestra el problema descrito. El JS que invoca iris se puede encontrar justo en la parte inferior de la sección JS.

  • ¿Puedes crear un jsFiddle?

    – Grevling

    30 de octubre de 2013 a las 12:58

  • Ciertamente, he actualizado mi pregunta.

    – David Gard

    30 de octubre de 2013 a las 13:17

avatar de usuario
Grevling

Puedes intentar algo como esto:

jQuery(document).ready(function ($) {    
    $('.colour-picker').iris();    
    $(document).click(function (e) {
        if (!$(e.target).is(".colour-picker, .iris-picker, .iris-picker-inner")) {
            $('.colour-picker').iris('hide');
            return false;
        }
    });
    $('.colour-picker').click(function (event) {
        $('.colour-picker').iris('hide');
        $(this).iris('show');
        return false;
    });
});

violín actualizado

  • Gracias, estamos llegando a alguna parte ahora. Sin embargo, hay dos problemas con esto: 1: tengo varias instancias y hago clic en una entrada que invoca iris a otro todavía da como resultado 2x selectores de color. 2: una vez iris está oculto, no se puede volver a mostrar para esa instancia (presumiblemente porque es un método de ‘ocultar’, no un método de ‘cerrar’, que aparentemente no existe).

    – David Gard

    30/10/2013 a las 16:46

  • Lo siento, lo probé mal. He actualizado el violín. Creo que cubre todo ahora 🙂

    – Grevling

    30/10/2013 a las 21:05

  • Lo siento, he estado fuera del trabajo durante unos días. Lo probé a primera hora y parece haber hecho el truco. Gracias.

    – David Gard

    4 de noviembre de 2013 a las 9:45

  • He añadido una solicitud de función a la Página de GitHub de Iris pidiendo una configuración para hacer esto automáticamente. Ojalá tomen nota, ya que me sorprendería si fuera el único que tuviera este problema…

    – David Gard

    4 de noviembre de 2013 a las 9:51


  • Sí, esto definitivamente debería ser una función OOTB.

    – Grevling

    4 de noviembre de 2013 a las 9:56

Por lo que vale, no necesitas llamar a iris directamente. A partir de la versión 3.5, el núcleo de WordPress define un método contenedor llamado wpColorPicker(), que implementa iris con alguna funcionalidad adicional:

http://make.wordpress.org/core/2012/11/30/nuevo-color-picker-in-wp-3-5/

Este contenedor se encarga de ocultar y mostrar el selector por usted y realiza un seguimiento de las instancias individuales.

Si está creando un complemento WP, probablemente sea mejor usar su contenedor, ya que agregarán nuevas funciones en el futuro. Además, si deciden usar otra biblioteca que no sea iris, es probable que el código de su complemento se rompa. El envoltorio evitará que eso suceda.

  • Eso me ayudó mucho. Muchas gracias. <3

    – Mayeenul Islam

    30 de abril de 2016 a las 16:52

puedes probar como abajo

$('input:not(.colour-picker)').iris('hide');

  • Sin embargo, ¿en qué contexto declararía eso? Simplemente declarándolo en ready causará un error porque estaría tratando de llamar al método hide antes de iris ha sido inicializado.

    – David Gard

    30 de octubre de 2013 a las 14:07

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad