0

以下是根据值修改 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];
                }
 });

遗憾的是，您无法像使用工具提示小部件一样配置工具提示。

4

2 回答 2

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)
    }
});
于 2013-10-17T20:20:58.057 回答
0

保留一个名为 _sliderValue 的局部变量。这是一个任意名称。随心所欲地称呼它。在滑块“幻灯片”事件处理程序中，将 _sliderValue 设置为e.value。然后，您的工具提示模板可以访问存储在局部变量中的值。

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

 
 
<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>

于 2017-09-08T14:15:10.837 回答