ejemplos - tooltip jquery

Desencadenar un evento deslizante jQuery UI (11)

¿Cómo puedo activar un evento de cambio en un control deslizante jQuery UI ?

Pensé que sería

$(''#slider'').trigger(''slidechange'');

pero eso no hace nada.

Completo script de ejemplo a continuación:

Esperaría que esto alertase "0" cuando se carga la página

Como documentation ;

change (event, ui) Activado después de que el usuario desliza un controlador, si el valor ha cambiado; o si el valor se cambia programáticamente a través del método de valor.

Solo ajuste el evento de cambio de enlace

$(".selector").slider({change: function(event, ui) {console.log(''It Works!''}});

y establecer el valor

$(".selector").slider(''value'',0);

Esto tal vez resucitar un hilo viejo, pero solo estaba teniendo una experiencia similar. La solución que se me ocurrió (porque la idea de llamar al slider(...) varias veces no era atractiva):

$slider.slider(''option'', ''slide'').call($slider, event, ui);

Con $slider vinculado a $(selector).slider(...) inicialización.

He atacado este problema recientemente y utilicé la solución de comentarios de Felipe Castro , con un cambio necesario para establecer el contexto correctamente:

$slider.slider(''option'', ''slide'').apply($slider, [null, {value: $slider.slider(''value'')}])

Me pareció más fácil usar el método ''crear'' para llamar a la función de deslizar o detener. Por ejemplo, para un control deslizante con un rango mínimo / máximo:

$(''#height'').slider({ ... create: function(event, slider){ $( "#height" ).slider( "option", "values", [1100, 1500] ); handleHeightSlide(''slide'', $( "#height" ));}, ... });

Otra forma, que es útil para widgets UI como autocompletar, es acceder al evento directamente a través del método de datos. JQuery almacena toda su información de conexión de eventos usando .data ("eventos"), por lo que si usa esa propiedad puede acceder directamente a los eventos. En algunos componentes de la interfaz de usuario (por ejemplo, autocompletar), los eventos ni siquiera están adjuntos al elemento principal, sino que están adjuntos al objeto de la interfaz de usuario en sí. Afortunadamente, ese objeto UI también está disponible en los datos.

Entonces, sin más preámbulos, así es como invocarías el evento de selección de autocompletar:

$("#autoComplete").data("autocomplete").menu.select()

O bien, (volviendo a los controles deslizantes) para activar el cambio de un control deslizante:

$("#slider").data("slider")._change()

El desencadenador sigue siendo la mejor manera, por supuesto, ya que utiliza el sistema de eventos, pero en los widgets más complejos donde "$ (elem) .trigger" no será suficiente, este enfoque es útil.

* EDIT *

Descubrí que realmente puede "activar" el evento correctamente con este método, usando la propiedad _trigger "secreta" del widget. Por ejemplo:

$("#autoComplete").data("autocomplete")._trigger("select", fakeEvent, fakeItem)

Espero que esto ayude a alguien.

Quería añadir un comentario sobre la respuesta de Joey Yore -

Creo que es mejor al revés

$(''#slider'').bind({ slidestart : function(event,ui) {...}, slidechange : function(event,ui) {...}, slidestop : function(event,ui) {...}, slidecreate : function(event,ui) {...} }).slider();

De lo contrario, algunos eventos (a saber, ''slidecreate'') serán ignorados

Sé que esto es mucho más allá de la fecha de publicación, pero quería publicar para proporcionar esta solución a cualquiera que tropiece con esta publicación.

Puede lograr desencadenar eventos haciendo algo como:

//TO DEFINE SLIDER AND EVENTS $(''#slider'').slider().bind(''slidechange'',function(event,ui){...}); //TO TRIGGER EVENT $(''#slider'').trigger(''slidechange'');

Desafortunadamente no puede definir las funciones como opciones dentro del objeto init, sin embargo, creo que termina luciendo más limpio y es más directo y correcto que la otra respuesta usando el método de llamada (es decir, si usa el sistema de eventos).

Y sí, las devoluciones de llamada que defina aquí serán llamadas en la operación normal (cambiando la posición del control deslizante en este caso) como lo haría normalmente. Solo asegúrate de usar los nombres correctos de tipo de evento en la documentación de UI.

Si desea agregar varios eventos a la vez, recuerde que puede proporcionar un objeto para enlazar usando los nombres de eventos como claves:

//TO DEFINE SLIDER AND EVENTS $(''#slider'').slider().bind({ slidestart : function(event,ui) {...}, slidechange : function(event,ui) {...}, slidestop : function(event,ui) {...}, }); //TO TRIGGER EVENTS $(''#slider'').trigger(''slidestart''); $(''#slider'').trigger(''slidechange''); $(''#slider'').trigger(''slidestop'');

Esto se observa en la documentación, aunque no está muy claro. Me llevó a desarrollar un par de complementos por mi cuenta para comprender realmente el sistema de eventos de UI.

Disfrutar

Si se une al evento de cambio del control deslizante de esa manera:

$(''#slider'').change(function() { alert(''action''); });

Entonces puedes activarlo como:

$(''#slider'').trigger(''change'');

La solución a continuación mencionada por Joey Yore también funciona, pero la desventaja es que el evento de cambio de slidechange no se slidechange (según mi experiencia) cuando el usuario cambia el control deslizante de la interfaz de usuario.

//TO DEFINE SLIDER AND EVENTS $(''#slider'').slider().bind(''slidechange'',function(event,ui){...}); //TO TRIGGER EVENT $(''#slider'').trigger(''slidechange'');

Tratar

$slider = $(''#slider''); $slider.slider(''option'', ''change'').call($slider);

¡No es ideal, pero te ayuda a trabajar!

Un buen enfoque es simplemente cambiar el valor del control deslizante. El método de cambio del deslizador debería responder al cambio de valor. Por ejemplo:

var newValue=5; $(''#slider'').slider("value", newValue);

Utilicé diapositivas modificadas y deslizantes, desencadenantes de diapositivas al arrastrar el punto, desencadenantes modificados después de soltar el botón del mouse (al igual que el evento de clic)

var slider1 = $("#slider1").slider({ min: 1, max: 6 }); //option 1 slider1.on("slide", function (e, ui) { }); //Option 2 slider1.on("slidechanged", function (e, ui) { });