Question

我有一个如此定义的滑块：

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

此属性设置滑块值和滑块渲染正确，但我的幻灯片处理程序从不被调用来对表进行处理。

我在这里缺少什么？

Answer 1

看起来slide参数仅对鼠标事件有效。以编程方式设置值时，将触发change事件。所以改变我的设置让我得到了我想要的东西。

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

Answer 2

要初始化滑块，上面的方法使用“幻灯片：功能（...”和“更改：功能（”）工作完美。但后来从外部更改滑块，例如通过单击缩略图或任何其他div与您可以使用“on-click-event”：

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

对我来说，必要的提示是稍微不正确的代码行（$ rows？，PHP？）：

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

Answer 3

为什么不在设置值后调用它？

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

Answer 4

如jquery的api中所述：使用slider（'value'，X）将调用内置的change函数。所以建议不要使用幻灯片回调。

Answer 5

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

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

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

5 个答案: