Utilizzo Bootstrap iFrame su Twitter?

Question

Appena iniziato ad esplorare Bootstrap di Twitter e mi piace quello che sto vedendo. Tuttavia ho una domanda su come implementare Tab che contengono un iFrame. So che iFrame sono terribili, ma se usati correttamente sono utili per visualizzare diversi tipi di dati.

Ho esperienza di schede jQueryUI che mi consente di visualizzare le schede di iFrame all'interno. Tuttavia non riesco a trovare alcuna documentazione per fare lo stesso con Bootstrap.

Dal punto di vista jQueryUI ho fatto in passato:

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

Quanto sopra è più avanzata rispetto allo standard jQueryUI Tab implementation.It mi permette di off-set il carico del iFrame fino a quando la scheda è selezionato dall'utente che è il modo migliore per farlo quando si caricano numerose pagine ecc.

Tuttavia, non riesco a vedere un modo simile con Bootstrap.

Cerchi puntatori qui ragazzi.

Acclamazioni Nick

Answer 1

seguito è una soluzione che utilizza un data-attributo personalizzato e un po 'jQuery. Oppure guarda il jsFiddle funzionante della stessa soluzione per 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>