自定義工具提示劍道UI滑塊

-2

下面是修改劍道的UI滑塊取決於值的工具提示的解決方案：自定義工具提示劍道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]; 
       } 
});

它不能將提示配置爲與工具提示窗口小部件貝蒂。

來源

2013-10-15 falko

這是一個有趣的問題，或者你在說什麼？ – Vojtiik

只是說。找不到解決方案，我提供了一個解決方案。 – falko

感謝您提供我一直在尋找的解決方案。誰在乎，如果答案在你的問題。這正是我所期待的。那謝謝啦。我提出了你的問題。 –

你已經走了一半。假設您需要像編輯視頻一樣表示分鐘和秒鐘。這個例子用於使用範圍滑塊。小提琴：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-17 20:20:58 spaceagestereo

你有沒有注意到你的蜱蟲不再出現？ – Grandizer

請叫_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-08 14:15:10

自定義工具提示劍道UI滑塊

回答

相關問題