在Bootstrap選項卡中初始化jQuery Isotope佈局

我有一個包含4個選項卡的引導選項卡控件。我的同位素代碼在第三個選項卡中。但是，當我導航到該選項卡時，佈局沒有參與（所有圖像都在自己的行上，而不是平鋪好的佈局）。如果我調整頁面大小，它將重新組織成適當的佈局。在Bootstrap選項卡中初始化jQuery Isotope佈局

我在這裏重新創建了這個問題。 http://jsfiddle.net/Vc6Vk/

<div class="tab-pane" id="messages"> 
    ....isotope code here 
</div>

你怎麼做同位素搞，這樣，當我瀏覽到該標籤，它已經被格式化並正確顯示？

您可以使用事件shown.bs.tab：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    $container.isotope('layout'); 
});

此代碼將觸發layout的所有選項卡，這樣你就可以檢測與e.target的標籤，如果e.target ==您的標籤鏈接到您的同位素網格，然後觸發layout。希望這是有道理的......

2013-10-06 23:20:15 Karine

這對於保持距離，當你登陸該選項卡上燒製CSS動畫的最佳方式的偉大工程，任何想法？ Id更喜歡動畫只發生在屏幕大小調整？ – IrokDaYellup

我們不能使用display：none，所以我們需要將容器可見性設置爲hidden，然後reLayout，然後在同位素完成網格時將其設置爲可見：http://jsfiddle.net/Vc6Vk/2/ – Karine

存在一個小問題，即一旦進入該選項卡，則選擇另一個，然後返回，現在隱藏。但除此之外，能見度花費的額外的幾毫秒對我來說不如原來的短css動畫更具吸引力。可能只是保持它與動畫一樣。我沒有超過JavaScript，所以它有點難以修改你的代碼。 :) – IrokDaYellup

通過卡林納答案是偉大的，但因爲方法「重新佈局」已更名爲「佈局」，它可能無法在近期的版本。

所以不是

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    $('.grid').isotope('reLayout'); 
});

請使用

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    $('.grid').isotope('layout'); 
});

2015-10-29 05:36:41 ankittiwaari

回答