Question

我正在尝试创建一个自定义工具提示，该工具提示显示在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/

Answer 1

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

会是这样的：

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/

Answer 2

事实上你的代码非常好。

在使用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>');
    },
};

现在，我不确定这可能产生的副作用，但在您的示例中，它可以在不损坏显示的情况下完美运行。但是......肯定有这个缩进的原因。

以下是更新后的fiddle。

Kendo Knockout Slider中的自定义工具提示

2 个答案: