使jQuery Isotope布局在Bootstrap选项卡中初始化 [英] Making a jQuery Isotope layout initialize inside a Bootstrap Tab

问题描述

我有一个带有4个标签的引导标签控件.我的同位素代码在第3个标签内.但是，当我导航到该选项卡时，布局没有被使用(所有图像都在它们自己的行上，而不是漂亮的平铺布局).如果我调整页面大小，它将重新组织为正确的布局.

I have a bootstrap tab control with 4 tabs. My Isotope code is inside the 3rd tab. But when I navigate to that tab, the layout is not engaged (All the images are on their own line, not in a nice tiled layout). If I resize the page it will reorganize into the proper layout.

我已经在这里重新创建了问题. http://jsfiddle.net/Vc6Vk/

I have recreated the issue here. http://jsfiddle.net/Vc6Vk/

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

如何使同位素参与其中，以便当我导航至选项卡时，它已经被格式化并正确显示?

How do you make the Isotope engage so that when I navigate to the tab, it is already formatted and displaying correctly?

推荐答案

您可以使用显示的事件.bs.tab:

You can use the event shown.bs.tab :

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

此代码将为所有选项卡触发layout，因此您可以使用e.target检测该选项卡，如果e.target ==您的选项卡链接到同位素网格，然后触发layout.希望有道理...

This code will trigger layout for all tabs, so you can detect the tab with e.target, if e.target == your tab link to your isotope grid, then trigger layout. Hope it makes sense...

http://jsfiddle.net/Vc6Vk/1/

这篇关于使jQuery Isotope布局在Bootstrap选项卡中初始化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！