KendoUI Slider:我可以在没有鼠标交互的情况下生成SLIDE或CHANGE事件吗？

Question

我正在使用一个六角形模式生成器,它使用KendoUI小部件作为GUI.

我正在尝试实现一个Randomize()函数,将滑块手柄设置为随机位置的动画.单击Randomize时调用该函数!按钮.这应该在Kendo滑块上生成一个slide或一个change事件,这反过来会触发changeYcomp(e)调用init()更新模式的函数的回调.

滑块的标记:

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

滑块的参数分配:

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

}

不幸的是,既不.k-draghandle通过CSS动画改变位置,也不改变任何滑块的HTML属性都会触发任何事件.

我假设滑块只是在侦听鼠标事件.

目前唯一的选择是通过step在动画上添加功能来分别管理滑块手柄位置和更新功能.

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

帮助赞赏.

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

有关工作示例,请参阅此jsFiddle.