使用 setOptions 动态更改属性后剑道滑块的问题
Posted
技术标签:
【中文标题】使用 setOptions 动态更改属性后剑道滑块的问题【英文标题】：Problems with kendo slider after dynamically changing properties using setOptions 【发布时间】：2021-09-30 00:10:23 【问题描述】：我在页面上有一个剑道滑块，其最小值/最大值设置为 0 和 100。此滑块的最小值/最大值是可变的，并且会根据用户在下拉列表中选择的内容而变化。例如，当用户在下拉列表中选择一个项目时，我使用 setOptions 更改滑块的最小/最大值 10 和 50。
var slider = $("#slider").data("kendoSlider");
slider.setOptions(
min: 10,
max: 50,
smallStep: 1,
largeStep: 5,
value: 10
);
slider.resize();
这似乎在滑块更新到我在setOptions 中设置的属性时起作用。但是，在我这样做之后，它并没有始终让我跳转到滑块中的值。
例如，如果我尝试单击40 处的滑块线，滑块将不会移动到它。有时会，有时不会。如果我将滑块球拖到一个数字上它工作正常，如果我使用增加/减少箭头按钮它工作正常。但是点击滑块中的数字不起作用。
在我使用 setOptions 动态更改属性之前，此跳转到滑块中的数字可以正常工作
无论我使用setOptions更改滑块中的什么属性，都会出现此问题
有什么想法吗？谢谢。
【问题讨论】：
【参考方案1】：我建议使用min (documentation) 和max (documentation) 方法为选项赋予新值。
通过使用这些方法，滑块可以正常使用它们各自的新最小/最大配置值。
这是我根据 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>【讨论】：
大卫，谢谢你的建议。我正在使用 setoptions，因为我还需要修改 smallStep 和 largeStep 属性。我试过你的sn-p，效果很好。大多数鼠标点击成功跳转到数字。不幸的是，我认为这个问题与我使用的样式表有关：kendo.common-material.min.css！只需在您的 sn-p 中更改它，就很难将滑块跳到特定数字。 样式表会引起您的问题很奇怪，但我也不会感到惊讶。以上是关于使用 setOptions 动态更改属性后剑道滑块的问题的主要内容，如果未能解决你的问题，请参考以下文章