jQuery UI 슬라이더 이벤트 트리거
jQuery UI 슬라이더 에서 변경 이벤트를 어떻게 트리거 할 수 있습니까?
나는 그것이 될 것이라고 생각했다
$('#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"으로 경고 할 것으로 예상합니다.
시험
$slider = $('#slider');
$slider.slider('option', 'change').call($slider);
이상적이지는 않지만 일하게합니다!
나는 이것이 게시 날짜가 지났음을 알고 있지만이 게시물을 우연히 발견하는 모든 사람 에게이 솔루션을 제공하기 위해 게시하고 싶었습니다.
다음과 같은 작업을 수행하여 이벤트 트리거를 수행 할 수 있습니다.
//TO DEFINE SLIDER AND EVENTS
$('#slider').slider().bind('slidechange',function(event,ui){...});
//TO TRIGGER EVENT
$('#slider').trigger('slidechange');
불행히도 init 객체 내에서 옵션으로 함수를 정의 할 수는 없지만, 결국 더 깔끔해 보이고 call 메서드를 사용하는 다른 대답보다 더 간단하고 정확하다고 생각합니다 (즉, 이벤트 시스템을 사용함).
그리고 예, 여기서 정의한 콜백은 일반적인 작업 (이 경우 슬라이더의 위치 변경)에서 정상적으로 호출됩니다. UI 문서에서 올바른 이벤트 유형 이름을 사용하는지 확인하십시오.
한 번에 여러 이벤트를 추가하려면 이벤트 이름을 키로 사용하여 바인딩 할 개체를 제공 할 수 있습니다.
//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');
이것은 문서에 명시되어 있지만 명확하지는 않습니다. UI 이벤트 시스템을 실제로 이해하기 위해 몇 가지 플러그인을 직접 개발했습니다.
즐겨
좋은 방법은 단순히 슬라이더의 값을 변경하는 것입니다. 그러면 슬라이더의 자체 변경 방법이 값 변경에 응답해야합니다. 예를 들면 :
var newValue=5;
$('#slider').slider("value", newValue);
자동 완성과 같은 UI 위젯에 편리한 또 다른 방법은 데이터 메서드를 통해 직접 이벤트에 액세스하는 것입니다. JQuery는 .data ( "events")를 사용하여 모든 이벤트 연결 정보를 저장하므로 해당 속성을 사용하면 이벤트에 직접 액세스 할 수 있습니다. 일부 UI 구성 요소 (예 : 자동 완성)에서는 이벤트가 기본 요소에 연결되지 않고 UI 개체 자체에 연결됩니다. 다행히도 해당 UI 객체는 데이터에서도 사용할 수 있습니다.
따라서 더 이상 고민하지 않고 자동 완성의 선택 이벤트를 호출하는 방법은 다음과 같습니다.
$("#autoComplete").data("autocomplete").menu.select()
또는 (슬라이더로 돌아가서) 슬라이더 변경을 트리거합니다.
$("#slider").data("slider")._change()
트리거는 실제로 이벤트 시스템을 사용하기 때문에 여전히 가장 좋은 방법이지만 "$ (elem) .trigger"로 충분하지 않은 더 복잡한 위젯에서는이 방법이 편리합니다.
* 편집하다 *
Just figured out that you actually can "trigger" the event properly with this method, using the widget's "secret" _trigger property. For example:
$("#autoComplete").data("autocomplete")._trigger("select", fakeEvent, fakeItem)
Hope this helps someone.
This maybe resurrecting an old thread, but was just having a similar experience. The solution that I came up with (because the thought of calling slider(...) multiple times was not appealing):
$slider.slider('option', 'slide').call($slider, event, ui);
With $slider being bound to the $(selector).slider(...) initialization.
Wanted to add a comment on Joey Yore's answer -
I think it's better the other way round
$('#slider').bind({
slidestart : function(event,ui) {...},
slidechange : function(event,ui) {...},
slidestop : function(event,ui) {...},
slidecreate : function(event,ui) {...}
}).slider();
Otherwise some events (namely, 'slidecreate') will be ignored
I found it easier to use the 'create' method to call the slide or stop function. Eg, for a slider with a min/max range:
$('#height').slider({
...
create: function(event, slider){ $( "#height" ).slider( "option", "values", [1100, 1500] ); handleHeightSlide('slide', $( "#height" ));},
...
});
As documentation;
change( event, ui ) Triggered after the user slides a handle, if the value has changed; or if the value is changed programmatically via the value method.
Just setup bind change event
$(".selector").slider({change: function(event, ui) {console.log('It Works!'}});
and set value
$(".selector").slider('value',0);
If you bind to to the slider's change event like that:
$('#slider').change(function() {
alert('action');
});
Then you can trigger it like:
$('#slider').trigger('change');
The solution below mentioned by Joey Yore works too, but the downside is that slidechange event is not fired (from my experience) when user changes your slider from UI.
//TO DEFINE SLIDER AND EVENTS
$('#slider').slider().bind('slidechange',function(event,ui){...});
//TO TRIGGER EVENT
$('#slider').trigger('slidechange');
I Used both slidechanged and slide, slide triggers when drag the point, slidechanged triggers after release the mouse button (just like click event)
var slider1 = $("#slider1").slider({ min: 1, max: 6 });
//option 1
slider1.on("slide", function (e, ui) {
});
//Option 2
slider1.on("slidechanged", function (e, ui) {
});
I've hit this problem recently, and used Felipe Castro's comment-solution, with a necessary change to set the context right:
$slider.slider('option', 'slide').apply($slider, [null, {value: $slider.slider('value')}])
jQueryUI 슬라이더 문서는 이벤트를 트리거에 대한 다음 예제를 제공합니다 :
$( ".selector" ).slider({
change: function( event, ui ) {}
});
이벤트 트리거의 경우 :
$( ".selector" ).on( "slidechange", function( event, ui ) {} );
이것은 나를 위해 작동하지 않았습니다!
모든 나는 변화였다 작업을 진행하기 위해해야 할 일을했을 "slidechange"로 "change".
$( ".selector" ).on( "change", function( event, ui ) {} );
이것이이 문제에 부딪힌 미래 세대를 돕기를 바랍니다.
참조 URL : https://stackoverflow.com/questions/1288824/trigger-a-jquery-ui-slider-event
'programing' 카테고리의 다른 글
| 정규식을 어떻게 단위 테스트합니까? (0) | 2021.01.18 |
|---|---|
| 사용자가 양식의 크기를 조정하지 못하도록하려면 어떻게합니까? (0) | 2021.01.18 |
| TSQL에서 증가하는 날짜의 결과 집합 생성 (0) | 2021.01.18 |
| WPF의 활성 창을 참조하십시오. (0) | 2021.01.18 |
| VBScript에서 문자열에 따옴표 추가 (0) | 2021.01.18 |