2

我正在开发一个使用 KendoUI 小部件作为 GUI的六边形图案生成器。

我正在尝试实现一个Randomize()将滑块句柄动画到随机位置的函数。单击随机化时调用该函数！按钮。这应该会在 Kendo 滑块上生成一个slideorchange事件，该事件又会触发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在动画上添加功能来分别管理滑块手柄位置和更新功能。

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

帮助表示赞赏。

4

1 回答 1

9

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

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

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

所以你可以这样做：

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

有关工作示例，请参阅此 jsFiddle 。

于 2012-12-08T14:47:48.347 回答