如何以编程方式设置 jQuery UI Slider 值并触发事件？答案

【问题标题】：How do I set the jQuery UI Slider value programmatically and fire events?如何以编程方式设置 jQuery UI Slider 值并触发事件？
【发布时间】：2009-05-20 17:06:11
【问题描述】：

我有一个这样定义的滑块：

$("#slider").slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: totalRows,
        value: totalRows,
        slide: function(e, ui) {
          scrollTheTable(ui.value, totalRows, visibleRows, $table);
        }
      });

当使用滑块时，分配给滑块的函数被调用没有问题。我有一个表，它可能包含也可能不包含具有 SelectedItem 类的行。我正在研究一种方法，该方法基本上会在页面加载时将该行“滚动”到表格顶部。

方法的实质是这样的：

$("#slider").slider('value', $rows.length - index);

此属性设置滑块值并且滑块正确呈现，但我的幻灯片处理程序永远不会被调用来完成桌面上的工作。

我在这里错过了什么？

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

看起来滑动参数只对鼠标事件有效。以编程方式设置值时，会触发更改事件。因此，将我的设置更改为此得到了我想要的。

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

【讨论】：

太棒了！我也遇到了这个问题，这很有帮助。
当用鼠标改变滑块时，这不是两次调用scrollTheTable吗？仅使用更改事件处理程序对我有用。

【解决方案2】：

要初始化滑块，上面使用“slide: function(...”和“change: function(”的方法很完美。但是之后从外部更改滑块，例如通过单击缩略图或任何其他带有您可以使用“点击事件”：

$("#slider").slider('value', newvalue);

对我来说最重要的提示是代码行稍微不正确（$rows ?, PHP?）：

$("#slider").slider('value', $rows.length - index);

【讨论】：

【解决方案3】：

我正在使用一个有 2 个手柄的滑块。我能够使用以下代码以编程方式对其进行更新：

$("#slider-range").slider('values',[57,180]).change();

【讨论】：

【解决方案4】：

为什么不设置值后调用呢？

scrollTheTable($rows.length - index, totalRows, visibleRows, $table);

【讨论】：

【解决方案5】：

如 jquery 的 api 中所述：使用 slider('value', X) 将调用内置的更改函数。所以建议不要使用幻灯片回调。

【讨论】：