jQuery Twitter Bootstrap iFrame 用法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13307518/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap iFrame usage?
提问by Nick Green
Just started exploring Twitter's Bootstrap and I like what I am seeing. However I have a query over how to implement Tabs that contain an iFrame. I know iFrame's are awful, but when used correctly are useful for displaying different types of data.
刚刚开始探索 Twitter 的 Bootstrap，我喜欢我所看到的。但是，我对如何实现包含 iFrame 的选项卡有疑问。我知道 iFrame 很糟糕，但是如果使用得当，它对于显示不同类型的数据很有用。
I have experience of jQueryUI Tabs which allows me to display iFrame's inside of tabs. However I cannot find any documentation to do the same with Bootstrap.
我有使用 jQueryUI 选项卡的经验，它允许我在选项卡内显示 iFrame。但是我找不到任何文档来对 Bootstrap 做同样的事情。
From a jQueryUI perspective I have done this in the past:
从 jQueryUI 的角度来看，我过去曾这样做过：
<div id="tabs">
<ul>
<li><a class="tabref" href="#tabs-1" rel="page1-iframe.html">Page 1 Title</a></li>
<li><a class="tabref" href="#tabs-2" rel="page2-iframe.html">Page 2 Title</a></li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2"></div>
</div>
The above is more advanced than standard jQueryUI Tab implementation.It allows me to off-set the load of the iFrame until the tab is selected by the user which is best way to do it when loading numerous pages etc.
以上比标准的 jQueryUI 选项卡实现更高级。它允许我抵消 iFrame 的加载，直到用户选择选项卡，这是加载大量页面等时执行此操作的最佳方式。
However, I cannot see a similar way with Bootstrap.
但是，我看不到 Bootstrap 的类似方式。
Looking for pointers here guys.
在这里寻找指针。
Cheers Nick
干杯尼克
回答by technoTarek
Below is a solution using a custom data-attribute and some jQuery. Or look at the working jsFiddle of the same solution for Bootstrap "LazyLoading" iFrames.
下面是使用自定义数据属性和一些 jQuery 的解决方案。或者查看Bootstrap "LazyLoading" iFrames相同解决方案的有效 jsFiddle 。
<div class="container">
<div class="row">
<div class="span12">
<ul class="nav nav-tabs" id="myTabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#dpa" data-toggle="tab">DPA</a></li>
<li><a href="#twon" data-toggle="tab">Antwon</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<p>test</p>
</div>
<div class="tab-pane" id="dpa" data-src="http://www.drugpolicy.org/">
<iframe src=""></iframe>
</div>
<div class="tab-pane" id="twon" data-src="http://player.vimeo.com/video/37138051?badge=0">
<iframe src="" width="500" height="203" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p><a href="http://vimeo.com/37138051">ANTWON ? HELICOPTER</a> from <a href="http://vimeo.com/tauszik">Brandon Tauszik</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
</div>
</div>
</div>
</div>
</div>?
<script>
$('#myTabs').bind('show', function(e) {
// identify the tab-pane
paneID = $(e.target).attr('href');
// get the value of the custom data attribute to use as the iframe source
src = $(paneID).attr('data-src');
//if the iframe on the selected tab-pane hasn't been loaded yet...
if($(paneID+" iframe").attr("src")=="")
{
// update the iframe src attribute using the custom data-attribute value
$(paneID+" iframe").attr("src",src);
}
});
</script>
