Запуск события слайдера пользовательского интерфейса 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 хранит всю информацию о подключении событий с помощью .данные ("события"), поэтому, если вы используете это свойство, вы можете получить доступ к событиям напрямую. На некоторых компонентах пользовательского интерфейса (например. автозаполнение) события даже не прикреплены к основному элементу, они прикреплены к самому объекту пользовательского интерфейса. К счастью, этот объект пользовательского интерфейса также доступен в 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') будут проигнорированы

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

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

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

изменение (событие, 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) {

});

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

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