在最小化浏览器窗口的同时重新调整 Kendo RangeSlider 的大小答案

【问题标题】：Re-size the Kendo RangeSlider while Minimize the window of browser在最小化浏览器窗口的同时重新调整 Kendo RangeSlider 的大小
【发布时间】：2016-10-02 07:19:55
【问题描述】：

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

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

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

所以，我只想在浏览器窗口最小化时这样做，然后剑道范围滑块应该是响应式的，因此在最小化浏览器窗口后，剑道范围滑块应该是全尺寸。

这是我的代码

 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();
 }

【问题讨论】：

你的意思是当用户调整窗口大小时滑块应该在它的最后一个位置还是应该总是全尺寸？
看，你有没有得到任何控制台错误？
不，不会出现任何类型的错误。
这里非常重要的是您放置此代码的位置以及它是否会影响或根本没有影响，因此只需在此$(window).resize(function () { 之后放置警报并检查您在调整窗口大小时是否调用了您的函数。
是的，这个已经完成了，也得到了提醒。

标签： javascript c# jquery css asp.net-mvc-4

【解决方案1】：

在我的代码中，我在 TreeView 的 dataBound 事件中绑定了 Slider。这样我初始化了这个 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 也是如此

【讨论】：