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

时间:2009-05-20 17:06:12

标签: jquery jquery-ui

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

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

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

我在这里缺少什么?

5 个答案:

答案 0 :(得分:22)

看起来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);
        }
      });

答案 1 :(得分:6)

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

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

对我来说,必要的提示是稍微不正确的代码行($ rows?,PHP?):

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

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

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

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

答案 4 :(得分:0)

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