Question

我正在研究使用KendoUI小部件作为GUI的hexagonal pattern generator。

我正在尝试实现一个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)
    });

}

不幸的是，既不通过CSS动画改变.k-draghandle位置，也不改变任何滑块的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() });

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

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

1 个答案: