1

タブストリップがあり、タブの1つにスプリッターが含まれています。問題は、タブをクリックしたときにスプリッターが正常に表示されないことです。左側のペインのサイズはゼロで、右側のペインは空白です。左側のペインを展開すると、正常に表示されます。

私もここでこの問題を見つけました：剣道UIフォーラム

だから私は提供されたコードを使用しました：

$("#tabstrip").kendoTabStrip({
animation: false,
select: function(e) {
    setTimeout(function() {
        $(e.contentElement).find(".k-splitter").each(function() {
            $(this).data("kendoSplitter").trigger("resize");
        });
    });
}
});

そして、過去の剣道のリリースでは、それはでさえも機能しましたanimation:true！

ただし、Q3ベータ版、そして今では完全なQ3を使い始めた後、上記のコードはalert("")、トリガーコマンドの前に置いた場合にのみ機能します。アラートがあれば問題なく動作しますが、アラートがないと、古い混乱した結果が再び表示されます。

私の現在のコードは次のとおりです。

$("#tabstrip").kendoTabStrip({
    animation : {
        open : {
            duration : 200,
            effects : "fadeIn"
        }
    },
    select : function(e) {
        setTimeout(function() {
            $(e.contentElement).find(".k-splitter").each(function() {
                $(this).show(500, function() {
                    alert("");
                    $(this).data("kendoSplitter").trigger("resize");
                });
            });
        });
    }
});

$("#splitter").kendoSplitter({
    panes : [
        {
            collapsible : true,
            size : "17%",
            scrollable: false
        },
        {
            collapsible : false,
            resizable: false,
            scrollable: false
        },
        {
            collapsible : true,
            size : "20%",
            scrollable: false
        },
    ],
});

私は何かを忘れていますか？のすべてalert("")が実際には意味をなさないので、もちろん、タブを選択するたびにアラートが表示されることは望ましくありません。

PS：とするとanimation:false、コードは。なしでも機能しますalert("")が、アニメーションはそのままにしておきたいと思います。

4

3 に答える 3

2

setTimeout関数に、アニメーションよりも長い期間（2番目のパラメーター）を指定します。

$("#tabstrip").kendoTabStrip({
    animation : {
        open : {
            duration : 200,
            effects : "fadeIn"
        }
    },
    select: function(e) {
        setTimeout(function() {
            $(e.contentElement).find(".k-splitter").each(function() {
                $(this).data("kendoSplitter").trigger("resize");
            });
        }, 300);
    }          
});

これがフィドルの例です：

http://jsfiddle.net/FLLJv/53/

于 2012-11-19T18:10:51.610 に答える
0

activateTabStripのイベントを使用できます。

$("#tabstrip").kendoTabStrip({
  activate: function(e) {
    $(e.contentElement).find('.k-splitter').trigger('resize');
  }
});

アニメーションに関しては欠点がある可能性がありますが、をいじくり回すよりも面倒ではないようsetTimeoutです。

于 2013-07-11T13:29:41.603 に答える
0

アニメーションが終了した後にも起動するイベントハンドラーではなく、アクティブ化resizeイベントハンドラーにコードを配置する必要があります。次に、完全に削除できます。selectsetTimeout

$("#tabstrip").kendoTabStrip({
    animation : {
        open : {
            duration : 200,
            effects : "fadeIn"
        }
    },
    activate: function(e) {
        $(e.contentElement).find(".k-splitter").each(function() {
            $(this).data("kendoSplitter").trigger("resize");
        });
    }          
});
于 2017-06-27T10:56:59.757 に答える