Запуск события слайдера пользовательского интерфейса jQuery

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

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

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

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

наслаждайтесь

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

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

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

Итак, без дальнейших церемоний, вот как вы вызываете событие select автозаполнения:

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

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

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

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

* EDIT*

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

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

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

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

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

С $slider будучи привязанным к $(selector).slider(...) инициализации.

хотел добавить комментарий к ответу Джоуи Йора -

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

});

недавно я столкнулся с этой проблемой и использовал Фелипе Кастрокомментарий-решение, с необходимым изменением, чтобы установить правильный контекст:

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