javascript - 在最小化浏览器窗口的同时调整Kendo RangeSlider的大小

当最小化浏览器窗口时，我想调整剑道范围滑块的大小

当浏览器窗口最大化时，剑道范围滑块显示为



当浏览器窗口最小化时，剑道范围滑块显示为



所以，我只是想做到这一点，当浏览器窗口最小化时，剑道范围滑块应具有响应性，因此，在最小化浏览器窗口之后，剑道范围滑块应为全尺寸。

这是我的代码

 var id;
 $(window).resize(function () {
 clearTimeout(id);
 id = setTimeout(doneResizing, 5);
 });

 function doneResizing() {
 var rangeSlider = $("#slider-range").getKendoRangeSlider();
 rangeSlider.wrapper.css("width", "100%");
 rangeSlider.resize();
 }

最佳答案

在我的代码中，我将Slider绑定到TreeView的dataBound事件中。这样，我两次初始化了此Slider，但无法调整Slider的大小。

为了防止这种双重初始化，我在该元素的getKendoRangeSlider（）上检查是否为null，如果为null，则使Slider为：

var rangeSlider = $("#slider-range").getKendoRangeSlider();

if(rangeSlider == null){
    $("#slider-range").kendoRangeSlider({
        min: 10,
        max: 50,
        orientation: "horizontal",
        smallStep: 1,
        largeStep: 10
    });
}
$(window).on('resize', function () {
  var sliders = $("[data-role='slider']");
  sliders.each(function (index, ele) {
    var slider = $(ele).data("kendoSlider");
    slider.wrapper.css("width", "100%");
    slider.resize();
  });
});

KendoSlider也是如此