如何以编程方式设置 jQuery UI Slider 值并触发事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/889116/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I set the jQuery UI Slider value programmatically and fire events?
提问by NotMyself
I have a slider defined like so:
我有一个像这样定义的滑块：
$("#slider").slider({
orientation: "vertical",
range: "min",
min: 0,
max: totalRows,
value: totalRows,
slide: function(e, ui) {
scrollTheTable(ui.value, totalRows, visibleRows, $table);
}
});
When using the slider, the function assigned to slide gets called no problem. I have a table that may or may not contain a row that has a class of SelectedItem. I am working on a method that will "scroll" that row to the top of the table on page load basically.
使用滑块时，分配给幻灯片的函数被调用没问题。我有一个表，它可能包含也可能不包含具有 SelectedItem 类的行。我正在研究一种方法，该方法基本上可以在页面加载时将该行“滚动”到表格的顶部。
The meat of the method looks like this:
该方法的主要内容如下：
$("#slider").slider('value', $rows.length - index);
This property sets the slider value and the slider renders properly, but my slide handler is never called to do the work on the table.
此属性设置滑块值并且滑块正确呈现，但我的幻灯片处理程序从未被调用来在表格上执行工作。
What am I missing here?
我在这里缺少什么？
回答by NotMyself
Looks like the slide parameter is only valid for mouse events. When setting the value programmatically the change event is fired. So changing my set up to this got me what I wanted.
看起来slide 参数只对鼠标事件有效。以编程方式设置值时，将触发更改事件。所以改变我的设置让我得到了我想要的。
$("#slider").slider({
orientation: "vertical",
range: "min",
min: 0,
max: totalRows,
value: totalRows,
slide: function(e, ui) {
scrollTheTable(ui.value, totalRows, visibleRows, $table);
},
change: function(e, ui) {
scrollTheTable(ui.value, totalRows, visibleRows, $table);
}
});
回答by Peppermint81
To initialize the slider, the method above with "slide: function(..." and "change: function(" works perfect. But to change the slider afterwards from outside e.g. by clicking a thumbnail or any other div with an "on-click-event" you can use:
要初始化滑块，上面使用“slide: function(...”和“change: function(”) 的方法效果很好。但是之后从外部更改滑块，例如通过单击缩略图或任何其他带有“on-单击事件”，您可以使用：
$("#slider").slider('value', newvalue);
The essential hint for me was the slightly incorrect code line ($rows ?, PHP?):
对我来说最重要的提示是稍微不正确的代码行（$rows ？，PHP？）：
$("#slider").slider('value', $rows.length - index);
回答by Alex W
I am using a slider that has 2 handles. I was able to programmatically update it with this code:
我正在使用一个有 2 个手柄的滑块。我能够使用以下代码以编程方式更新它：
$("#slider-range").slider('values',[57,180]).change();
回答by Michal - wereda-net
as stated in api of jquery: using slider('value', X) will call built in change function. so a suggestion is to not use slide callback.
如 jquery 的 api 中所述：使用 slider('value', X) 将调用内置更改函数。所以建议不要使用幻灯片回调。
回答by Daniel A. White
Why don't you call this after you set the value?
设置值后为什么不调用它？
scrollTheTable($rows.length - index, totalRows, visibleRows, $table);
