Question

我有一个Tabstrip，其中一个标签包含一个Splitter。问题是当我单击选项卡时Splitter没有正常显示 - 左窗格的大小为零，右窗格为空白。如果我展开左窗格，它会正常显示。

我也在这里发现了这个问题：Kendo UI Forum

所以我使用了提供的代码：

$("#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("")的情况下工作，但我想保持动画原样。

Answer 1

为 setTimeout 功能提供比动画更长的持续时间（第二个参数）。

$("#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/

Answer 2

您可以将activate事件用于TabStrip：

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

有可能存在动画方面的缺点，但它似乎比使用setTimeout更糟糕。

Answer 3

您应该将resize代码放在activate事件处理程序中，而不是select事件处理程序，它在动画完成后也会触发。然后，您可以完全删除setTimeout：

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

Kendo UI Splitter调整大小

3 个答案: