Запустить событие слайдера jQuery UI

Ответ 1

Try

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

Не идеален, но помогает вам работать!

Ответ 2

Я знаю, что это путь к дате публикации, но я хотел опубликовать это решение для всех, кто наткнулся на этот пост.

Вы можете выполнить запуск события, выполнив что-то по строкам:

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

//TO TRIGGER EVENT
$('#slider').trigger('slidechange');

К сожалению, вы не можете определить функции как параметры внутри объекта init, однако, я думаю, что он заканчивается тем, что выглядит более чистым и более прямым и правильным, чем другой ответ, используя метод вызова (то есть он использует систему событий).

И да, обратные вызовы, которые вы определяете здесь, будут вызваны при нормальной работе (в этом случае, изменив положение ползунка), как обычно. Просто убедитесь, что вы используете правильные имена типов событий из документации пользовательского интерфейса.

Если вы хотите добавить сразу несколько событий, помните, что вы можете предоставить объект для привязки, используя имена событий в качестве ключей:

//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');

Это отмечается в документации, хотя, это не очень понятно. Попросил меня разработать пару плагинов самостоятельно, чтобы действительно понять систему событий пользовательского интерфейса.

Enjoy

Ответ 3

Хороший подход - просто изменить значение ползунка. Затем собственный метод изменения ползунка должен реагировать на изменение значения. Например:

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

Ответ 4

Еще один способ, который удобен для виджета пользовательского интерфейса, такого как автозаполнение, - это получить доступ к событию напрямую с помощью метода данных. JQuery хранит всю информацию о подключении к событию с использованием .data( "events" ), поэтому, если вы используете это свойство, вы можете напрямую обращаться к событиям. На некоторых компонентах пользовательского интерфейса (например, автозаполнение) события даже не привязаны к основному элементу, они привязаны к самому объекту пользовательского интерфейса. К счастью, этот объект пользовательского интерфейса также доступен в данных.

Итак, без лишнего шума, здесь, как вы вызываете событие выбора автозаполнения:

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

Или, (возврат к ползункам), чтобы вызвать изменение ползунка:

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

Триггер по-прежнему остается лучшим способом, поскольку он действительно использует систему событий, но в более сложных виджетах, где "$ (elem).trigger" будет недостаточно, этот подход удобен.

* РЕДАКТИРОВАТЬ *

Просто выяснилось, что вы действительно можете "запустить" событие соответствующим образом с помощью этого метода, используя виджет "секретный" свойство _trigger. Например:

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

Надеюсь, это поможет кому-то.

Ответ 5

Это может быть воскрешение старого потока, но у него был похожий опыт. Решение, с которым я столкнулся (потому что мысль о вызове slider(...) несколько раз не была привлекательной):

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

С $slider связано с инициализацией $(selector).slider(...).

Ответ 6

Хотелось бы добавить комментарий к Joey Yore answer -

Я думаю, что лучше наоборот.

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

В противном случае некоторые события (а именно "slidecreate" ) будут проигнорированы

Ответ 7

Мне было проще использовать метод "create" для вызова функции слайда или остановки. Например, для слайдера с диапазоном min/max:

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

Ответ 8

Как документация;

change (event, ui) Запускается после того, как пользователь сдвигает дескриптор, если значение изменилось; , или если значение изменяется программно с помощью метода значений.

Просто настройте событие изменения привязки

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

и установить значение

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

Ответ 9

Если вы привязываетесь к событию изменения слайдера:

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

Затем вы можете вызвать его так:

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

Решение, упомянутое выше Joey Yore, тоже работает, но недостатком является то, что событие slidechange не запускается (из моего опыта), когда пользователь меняет свой слайдер из пользовательского интерфейса.

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

//TO TRIGGER EVENT
$('#slider').trigger('slidechange');

Ответ 10

Я использовал оба слайдов и слайдов, сдвинуть триггеры при перетаскивании точки, триггеры с слайдером после отпускания кнопки мыши (точно так же, как событие click)

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

});
//Option 2
slider1.on("slidechanged", function (e, ui) {

});