KendoUI Slider：我可以在沒有鼠標交互的情況下生成幻燈片或更改事件嗎？

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> 

腳本回調：

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

：

滑塊

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

參數賦值

隨機化功能：

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。