jquery - Kendo UI slider : can I generate a SLIDE or CHANGE event without mouse interaction?

Question

我正在开发一个hexagonal pattern generator使用 KendoUI 小部件作为 GUI。

我正在尝试实现一个 Randomize() 函数，该函数会将 slider handle 设置为随机位置的动画。单击“随机化”时会调用该函数!按钮。 这应该在 Kendo slider 上生成 slide 或 change 事件，进而触发调用 的 changeYcomp(e) 回调init() 函数更新模式。

slider 标记:

 <div class="sliderwrapper" id="yslider">
                            <label for="ycompSlider">Y variation</label>
          <input id="ycompSlider" class="slider" />
 </div>

回调脚本:

function changeYcomp(e) {
    kendoConsole.log("New slide value is: " + e.value);
    ycomp = e.value;
    init();
}

slider 的参数分配:

$("#ycompSlider").kendoSlider({
                                slide: changeYcomp,
                                change: changeYcomp,
                                min: -10,
                                max: 10,
                                smallStep: 1,
                                largeStep: 10,
                                value: 0
                            });

随机化函数:

function Randomize() {
    console.log("Randomizing!")
    $("#yslider .k-draghandle").animate({
      left: Math.round(Math.random()*130-7)
    });

}

遗憾的是，无论是通过 CSS 动画更改 .k-draghandle 位置，还是更改 slider 的任何 HTML 属性都不会触发任何事件。

我假设 slider 仅监听鼠标事件。

目前唯一的选择是通过在动画上添加 step 功能来分别管理 slider handle 位置和更新功能。

我想避免这种情况，因为它会强制进行一些重新设计或涉及重复。

感谢帮助。

Answer 1

您可以在小部件上使用 trigger() 函数来触发其事件:

$("#yslider").data("kendoSlider").trigger("slide", { value: 123 });

需要注意的是，您必须指定传递给回调的事件对象。幸运的是，幻灯片事件仅包含 value 属性。

所以你可以这样做:

var slider = $("#slider").data("kendoSlider");
slider.value(5);
slider.trigger("slide", { value: slider.value() });

参见this jsFiddle一个工作示例。