Я хотел бы анимировать свои датчики kendoUI в реальном времени при изменении данных. В настоящее время я могу сделать это, установив значения указателя датчика напрямую и обновив, но когда я это сделаю, он перейдет прямо к новому значению, а не будет изящно к нему анимироваться. Как добавить анимацию, как это делает элемент управления Gauge при первом запуске?
1 ответ
Обновлять его не нужно, просто установите новое значение с помощью value
, он обновляется и анимируется.
Пример: определен HTML-код input
, который я украшаю цифровым текстовым полем Kendo. Каждый раз, когда я обновляю значение, обновляются и радиальный, и линейный датчик.
HTML код:
<div>
<input id="gauge-value" value="65">
</div>
<div id="gauge-container">
<div id="gaugeR"></div>
<div id="gaugeL"></div>
</div>
JavaScript (инициализация датчиков):
var gaugeR = $("#gaugeR").kendoRadialGauge({
pointer: {
value: value.value()
},
scale : {
minorUnit : 5,
startAngle: -30,
endAngle : 210,
max : 180
}
}).data("kendoRadialGauge");
var gaugeL = $("#gaugeL").kendoLinearGauge({
pointer: {
value: value.value(),
shape: "arrow"
},
scale : {
majorUnit: 20,
minorUnit: 5,
max : 180
}
}).data("kendoLinearGauge");
И NumericTextBox
с обработчиком события изменения, который обновляет gauges
:
var value = $("#gauge-value").kendoNumericTextBox({
min : 0,
max : 180,
change: function () {
var v = $("#gauge-value").val();
gaugeR.value(v);
gaugeL.value(v);
}
}).data("kendoNumericTextBox");
Пример в JSFiddle
Похожие вопросы
Новые вопросы
kendo-ui
Kendo UI - это фреймворк для создания HTML UI. Он предоставляет все необходимое для клиентской разработки на основе jQuery в одном интегрированном компактном пакете с интеграцией AngularJS.
redraw
. Я не знаю, что вы имеете в виду, когда перерисовываете элемент управления. Проверьте здесь jsfiddle.net/OnaBai/vnGNj/2 и попробуйте поиграть с другими значениями.