2

KendoUI ウィジェットを GUI として使用する六角形パターン ジェネレーターに取り組んでいます。

Randomize()スライダー ハンドルをランダムな位置にアニメーション化する関数を実装しようとしています。この関数は、Randomize! をクリックすると呼び出されます。ボタン。slideこれにより、Kendo スライダーでorイベントが生成され、パターンを更新する関数を呼び出すコールバックが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-draghandleCSS アニメーションで位置を変更したり、スライダーの 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 に答える