使用setoptions动态更改属性后剑道滑块出现问题

shstlldc 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(284)

我在页面上设置了一个剑道滑块，最小/最大值为0和100。该滑块的最小/最大值是可变的，并且根据用户在下拉列表中选择的内容而变化。例如，当用户选择dropdownlist中的项目时，我会更改滑块的最小/最大值 10 及 50 使用setoptions。

var slider = $("#slider").data("kendoSlider");
slider.setOptions({
  min: 10,
  max: 50,
  smallStep: 1,
  largeStep: 5,
  value: 10
});
slider.resize();

这似乎在滑块更新我在中设置的属性时起作用 setOptions . 但是，在我这样做之后，它不会一直让我跳转到滑块中的值。
例如，如果我尝试单击此处的滑块线 40 ，滑块将不会移动到该位置。有时会，有时不会。如果我将滑块球拖动到一个数字，它工作正常；如果我使用增加/减少箭头按钮，它工作正常。但是单击滑块中的数字不起作用。
在我使用动态更改属性之前，在滑块中跳到一个数字效果很好 setOptions 无论我使用什么更改滑块中的属性，都会出现此问题 setOptions 有什么想法吗？谢谢

jquery kendo-ui slider telerik

来源：https://stackoverflow.com/questions/68489454/problems-with-kendo-slider-after-dynamically-changing-properties-using-setoption

1条答案

按热度按时间

xdnvmnnf1#

我建议使用 min （文件）及 max （文档）为选项提供新值的方法。
通过使用这些方法，滑块可以使用各自的新最小/最大配置值正常工作。
下面是一个示例，我将根据kendonumericupdowns设置最小/最大配置值：

<head>
  <meta charset="utf-8">
  <title>Slider Example</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.mobile.all.min.css">
</head>
<body>

  <input id="min" />
  <input id="max" />
  <input id="slider" />

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.2.616/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.2.616/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#min').kendoNumericTextBox({
        decimals: 0,
        format: 'n0',
        label: 'Min',
        min: 1,
        restrictDecimals: true,
        round: true,
        value: 1,
        change: function() {
          var value = parseInt(this.value());
          var nud = $('#max').data('kendoNumericTextBox');
          nud.min(value + 1);
          if (nud.value() < nud.min()) {
            nud.value(value + 1);
          }
          nud.trigger('change');
          var slider = $("#slider").data('kendoSlider');
          slider.min(value);
          if (slider.value() < slider.min()) {
            slider.value(value);
          }
        }
      });
      $('#max').kendoNumericTextBox({
        decimals: 0,
        format: 'n0',
        label: 'Max',
        min: 2,
        restrictDecimals: true,
        round: true,
        value: 2,
        change: function() {
          var value = this.value();
          $("#slider").data('kendoSlider').max(value);
        }
      });
      $("#slider").kendoSlider({
        min: 1,
        max: 2
      });
    });
  </script>
</body>

赞(0）回复(0）举报 2021-09-13

我来回答

使用setoptions动态更改属性后剑道滑块出现问题

1条答案

相关问题

热门标签

最新问答