1

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

我在这里也发现了这个问题：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 beta 之后，现在是完整的 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函数一个比动画更长的持续时间（第二个参数）。

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

您可以将activate事件用于 TabStrip：

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

就动画而言，可能存在一些缺点，但它似乎比使用setTimeout.

于 2013-07-11T13:29:41.603 回答
0

您应该将resize代码放在激活事件处理程序中，而不是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");
        });
    }          
});
于 2017-06-27T10:56:59.757 回答