Twitter Bootstrap iFrame使用情況？

剛開始探索Twitter的Bootstrap，我喜歡我所看到的。不過，我有一個關於如何實現包含iFrame的選項卡的查詢。我知道iFrame的可怕，但正確使用對於顯示不同類型的數據很有用。Twitter Bootstrap iFrame使用情況？

我有經驗的jQueryUI標籤，它允許我顯示標籤內的iFrame。但是我找不到任何文檔來做與Bootstrap相同的文檔。

從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>

比標準jQueryUI的標籤implementation.It更先進允許我抵銷iFrame的負載，直到選項卡用戶選擇這是加載大量頁面時最好的方式。

但是，我看不到類似Bootstrap的方式。

尋找指針在這裏球員。

乾杯尼克

來源

2012-11-09 Nick Green

下面是使用自定義數據屬性和一些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>

來源

2012-11-09 13:52:41 technoTarek

工作很好！你知道任何可與Bootstrap配合使用的「調整大小」功能嗎？在過去，我有另一個功能來做到這一點很混亂，並想知道這個框架內是否存在任何東西？ –

你會如何加載第一幀？我注意到它取消了iframe 2和3的負載，但iframe 1只在我第一次訪問時才加載。可以在加載頁面時加載該頁面。 –

'$（paneID）.find（「iframe」）。height（$（window）.height（） - 80）;'適用於高度 - 只是將其添加到JS的末尾。 –

Twitter Bootstrap iFrame使用情況？

回答

相關問題