问题
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.
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?
回答1:
You can use the event shown.bs.tab :
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$container.isotope('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/
回答2:
The answer by Karine is great but it might not work in recent versions because the method "reLayout" has been renamed to "layout".
So instead of
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('.grid').isotope('reLayout');
});
please use
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('.grid').isotope('layout');
});
来源:https://stackoverflow.com/questions/19214362/making-a-jquery-isotope-layout-initialize-inside-a-bootstrap-tab