Kendo UI Splitter调整大小

我有一个Tabstrip，其中一个Tabs包含一个Splitter。问题在于，当我单击选项卡时，Splitter没有正常显示 - 左窗格的大小为零，右窗格为空。如果我展开左侧窗格，它会正常显示。Kendo UI 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("")，但我想保持动画，因为它是。

来源

2012-11-16 CipherDarkness

给这个的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-19 18:10:51

它的工作确实没想到的是，感谢！ – CipherDarkness

使用'setTimeout'创建延迟通常是一个不好的解决方案。在最糟糕的情况下，它会在较慢的机器上或其他原因造成竞争状况，最好的情况是在动画完成后你会失去100毫秒的空闲时间。 – Shai

您可以使用tabstrip的的activate事件：

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

这是可能有其中的动画而言缺点，但它似乎不如setTimeout那样混乱。

来源

2013-07-11 13:29:41 Hannele

您应该将代码放入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"); 
     }); 
    }   
});

来源

2017-06-27 10:56:59 Shai

Kendo UI Splitter调整大小

回答

相关问题