剑道 UI 拆分器调整大小答案

【问题标题】：Kendo UI Splitter resize剑道 UI 拆分器调整大小
【发布时间】：2012-11-16 10:50:21
【问题描述】：

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

【问题讨论】：

标签： resize kendo-ui splitter

【解决方案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/

【讨论】：

使用setTimeout 来创建延迟通常是一个糟糕的解决方案。在最坏的情况下，它会在较慢的机器上或由于其他原因产生竞争条件，在最好的情况下，动画完成后你会无缘无故失去 100 毫秒。

【解决方案2】：

您可以为 TabStrip 使用 activate 事件：

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

在动画方面可能存在缺点，但它似乎比使用setTimeout 更混乱。

【讨论】：

【解决方案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");
        });
    }          
});

【讨论】：