自定义工具提示Kendo UI滑块 [英] Custom Tooltip kendo ui slider

查看:102
本文介绍了自定义工具提示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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆