Инициировать событие ползунка jQuery UI

Question

Инициировать событие ползунка jQuery UI

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

Я думал, что это будет

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

но это ничего не делает.

Полный пример скрипта следующий:

<link href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" type="text/css"> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script> 
<script src="http://jqueryui.com/latest/ui/ui.core.js" type="text/javascript"></script> 
<script src="http://jqueryui.com/latest/ui/ui.slider.js" type="text/javascript"></script> 

<body>

<div id="slider"></div>

<script type="text/javascript">

$().ready(function()
{
    $('#slider').slider({change: function() { alert(0); }});

    // These don't work
    $('#slider').trigger('change');
    $('#slider').trigger('slidechange');
});
</script>

Я ожидаю, что это предупредит "0", когда страница загружается

55

jquery events jquery-ui-slider

Источник

user24181 17 авг '09 в 16:00

12 ответов

Решение

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

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

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

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

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

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

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

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

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

наслаждаться

40

Источник

user820014 05 июл '11 в 14:27

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

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

18

Источник

user724064 17 апр '13 в 21:16

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

Итак, без лишних слов, вот как вы бы вызвали событие select автозаполнения:

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

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

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

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

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

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

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

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

4

Источник

user5921 20 янв '12 в 01:55

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

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

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

4

Источник

user1812854 04 ноя '13 в 21:27

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

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

2

Источник

user1475981 22 июн '12 в 21:31

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

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

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

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

2

Источник

user345007 28 сен '11 в 09:43

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

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

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

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

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

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

1

Источник

user1845491 26 ноя '13 в 15:12

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

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

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

});

0

Источник

user3313353 14 дек '14 в 17:11

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

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

0

Источник

user3824804 24 май '18 в 13:26

В документации jQueryUI Slider приведен следующий пример запуска события:

$( ".selector" ).slider({
    change: function( event, ui ) {}
});

и для триггера события:

$( ".selector" ).on( "slidechange", function( event, ui ) {} );

это не сработало для меня!

Все, что я должен был сделать, чтобы это работало, должно было измениться "slidechange" в "change",

$( ".selector" ).on( "change", function( event, ui ) {} );

Надеюсь, что это поможет будущим поколениям, которые столкнутся с этой проблемой.

-1

Источник

user1208966 16 фев '19 в 11:55

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

$('#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');

-1

Источник

user1267021 25 июн '13 в 20:46

Другие вопросы по тегам jquery events jquery-ui-slider

user6440 17 авг '09 в 16:46 2009-08-17 16:46 · Accepted Answer · 2009-08-17 16:46

Пытаться

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

Не идеально, но заставляет вас работать!

альтернативный текст

51

Источник

user6440 17 авг '09 в 16:46