Twitter Bootstrap iFrame使用情况? [英] Twitter Bootstrap iFrame usage?
问题描述
只是开始探索Twitter的Bootstrap,我喜欢我所看到的.但是我有一个关于如何实现包含iFrame的选项卡的查询.我知道iFrame太糟糕了,但是正确使用它对于显示不同类型的数据很有用.
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.
我有jQueryUI Tabs的经验,它使我能够在标签内显示iFrame的内容.但是,我找不到任何有关Bootstrap的文档.
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的角度来看,我过去曾经这样做过:
From a jQueryUI perspective I have done this in the past:
<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>
以上是比标准jQueryUI Tab实现更高级的方法,它使我可以抵消iFrame的负载,直到用户选择该选项卡为止,这是加载大量页面等时最好的方式.
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.
但是,我看不到Bootstrap的类似方法.
However, I cannot see a similar way with Bootstrap.
在这里寻找指针的人.
欢呼 尼克
推荐答案
以下是使用自定义数据属性和一些jQuery的解决方案.或查看引导"LazyLoading" iFrame的同一解决方案的有效jsFiddle .
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.
<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>
这篇关于Twitter Bootstrap iFrame使用情况?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!