Question

以下是根据值修改kendo-ui滑块工具提示的解决方案：

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];
                }
 });

如同使用tooltip-widget一样，您无法配置工具提示。

Answer 1

你在那里一半。假设您需要表示分钟和秒钟，就好像您正在编辑视频一样。此示例用于使用范围滑块。小提琴：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)
    }
});

Answer 2

保留一个名为_sliderValue的局部变量。这是一个任意名称。称之为你想要的。在滑块＆＃34; slide＆＃34;事件处理程序，将_sliderValue设置为 e.value 。然后，您的工具提示模板可以访问存储在局部变量中的值。

＆＃13;

var _sliderValue = 0;
var template = kendo.template($("#sliderTemplate").html());

//$("#slider").load(function() {
$("#slider").kendoSlider({
    min: 0,
    max: 3,
    smallStep: 1,
    largeStep: 1,
    value: 0,
    tooltip: {template: template},
    slide: function (e) {
      _sliderValue = e.value;
    }
});
//});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>

<script id="sliderTemplate" type="text/x-kendo-tmpl">
  <div>Text #= _sliderValue #</div>
</script>

<div id="slider"></div>

＆＃13;

自定义工具提示kendo ui滑块

2 个答案: