1

我正在尝试创建一个自定义工具提示，该工具提示显示在 Kendo 滑块的拖动手柄内，并随着拖动手柄的移动而动态更新。

过去，我可以通过使用幻灯片功能更新自定义工具提示的文本，使用普通的 Kendo 来做到这一点，如下所示：

element.kendoSlider({
    min: 0,
    max: 100,
    tooltip: { 'enabled': false },
    slide: sliderOnSlide,
    tickPlacement: 'none',
    showButtons: false,
    smallStep: 1,
    largeStep: 1
});

var slider = element.data('kendoSlider');

slider.wrapper.find('.k-draghandle').empty().html('<span class="sliderTip">0%</span>');

function sliderOnSlide(e) {
    $('.k-draghandle.draggerOn .sliderTip').empty().text(e.value.toString() + '%');
}

我想这可以通过 Knockout 更干净、更可靠地完成，但到目前为止我还没有成功。我试图通过使用 Knockout 自定义绑定处理程序来获取拖动句柄：

<input class="slider col" data-bind="kendoSlider: { value: currValue, enabled: enabled, min: 0, max: 100, tickPlacement: 'none', smallStep: 1 }, sliderTip: {}" />

var viewModel = function () {
    this.currValue = ko.observable(0);
    this.enabled = ko.observable(true);
    this.width = ko.observable();
};

ko.bindingHandlers.sliderTip = {
    init: function(element, valueAccessor) {
        var dragger = $(element).closest('.k-slider').find('.k-draghandle');

        dragger.empty().html('<span class="sliderTip">0%</span>');
    } 
};

ko.applyBindings(new viewModel());

我已经能够插入我的自定义工具提示，但它没有显示，我不知道如何让它动态更新。我试图将我的 sliderOnSlide 函数硬塞到 Kendo-Knockout 中的尝试没有成功。

很高兴在这方面得到一些帮助。这是我一直在试验的一个 JSFiddle，其中包含上面列出的代码和相应的 HTML/CSS：http: //jsfiddle.net/MontiDesign/DuZK3/17/

4

2 回答 2

1

我不确定您希望它的外观/行为方式如何，但一种选择是sliderTip在自定义绑定中创建您的元素，然后创建在同一元素上创建的 kendoSlider 小部件bind的事件。slide

会是这样的：

ko.bindingHandlers.sliderTip = {
    init: function(element, valueAccessor, allBindings) {
        var slider = $(element).data("kendoSlider"),
            tip;

        if (slider) {
            tip = $('<span class="sliderTip">0%</span>');
            slider.wrapper.find('.k-draghandle').empty().append(tip);  

            slider.bind("slide", function(e) {
               tip.empty().text(e.value.toString() + "%"); 
            });
        }  
    }
};

示例：http: //jsfiddle.net/rniemeyer/y6a6s/

于 2013-05-06T15:47:38.013 回答
0

实际上，您的代码非常好。

在使用 Chrome 的调试器挖掘 CSS 之后（没有它你怎么能活...？）我看到该k-draghandle元素的text-indent属性设置为-3333px。这就解释了为什么您放入的任何东西都不会出现。

我的解决方法是在您的自定义绑定处理程序中添加一行来删除它text-indent：

ko.bindingHandlers.sliderTip = {
    init: function(element, valueAccessor) {
        var dragger = $(element).closest('.k-slider').find('.k-draghandle');   
        dragger.css("text-indent", "0px");
        dragger.empty().html('<div class="sliderTip">' + valueAccessor() + '</div>');
    },
};

现在，我不确定这可能产生的副作用，但在您的示例中，它可以完美地工作而不会损坏显示器。但是......肯定有这个缩进放在那里的原因。

这是更新的小提琴。

于 2013-05-06T15:49:22.490 回答