自定义工具提示Kendo UI滑块 [英] Custom Tooltip kendo ui slider
本文介绍了自定义工具提示Kendo UI滑块的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
以下是一种根据值修改kendo-ui滑块的工具提示的解决方案:
Here's a solution for modifying the tooltip of the kendo-ui slider depending on the value:
var text = [];
text.push("Text 1");
text.push("Text 2");
text.push("Text 3");
text.push("Text 4");
$("#slider").kendoSlider({
min: 0,
max: 3,
smallStep: 1,
largeStep: 1,
value: 0,
tooltip: {
enabled: true,
format: text[0], // min-value text
},
slide: function (e) {
e.sender.options.tooltip.format = text[e.value];
}
});
您不能像使用工具提示小部件一样配置工具提示.
It' a pitty you can't configure the tooltip as with the tooltip-widget.
推荐答案
您已经到了一半.假设您需要像编辑视频一样代表分钟和秒.本示例是使用范围滑块的.小提琴: http://jsfiddle.net/KjABb/
You're half way there. Lets say you needed to represent minutes and seconds as if you were editing a video. This example is for using a range slider. Fiddle: http://jsfiddle.net/KjABb/
var text = [];
var templateString = "#= formatToMinutesSeconds(selectionStart) # - #= formatToMinutesSeconds(selectionEnd) #";
var mediaLength = 229; //03:49
function formatToMinutesSeconds(value) {
return text[value];
}
var i = 0;
while (i <= mediaLength) {
var date = new Date(null);
date.setSeconds(i);
var minutesSeconds = kendo.toString(date, "mm:ss");
text.push(minutesSeconds);
i++;
}
$("#clip-editor-slider").kendoRangeSlider({
min: 0,
max: mediaLength,
smallStep: 1,
largeStep: 60,
tickPlacement: "both",
tooltip: {
template: kendo.template(templateString)
}
});
这篇关于自定义工具提示Kendo UI滑块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文