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調整大小

回答

相關問題