1

剣道スライダーのドラッグ ハンドル内に表示され、ドラッグ ハンドルが移動すると動的に更新されるカスタム ツールチップを作成しようとしています。

以下のように、スライド機能を使用してカスタム ツールチップのテキストを更新することで、以前はプレーンな剣道を使用してこれを行うことができました。

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 に押し込もうとする試みは成功しませんでした。

これについて何か助けていただければ幸いです。これは、上記のコードと対応する HTML/CSS を含む、私が実験してきた JSFiddle です: http://jsfiddle.net/MontiDesign/DuZK3/17/

4

2 に答える 2

1

どのように表示/動作させたいか正確にはわかりませんがsliderTip、カスタムバインディングで要素を作成してから、同じ要素で作成された kendoSlider ウィジェットbindのイベントを作成するという 1 つのオプションがあります。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に設定されていることがわかりました。これは、中に入れたものがまったく表示されない理由を説明しています。

私の修正は、カスタム バインディング ハンドラーに 1 行だけ追加して、これを削除すること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です。

于 2013-05-06T15:49:22.490 に答える