Twitter Bootstrap iFrame sử dụng?

Question

Chỉ cần bắt đầu khám phá Bootstrap của Twitter và tôi thích những gì tôi thấy. Tuy nhiên tôi có một truy vấn về cách triển khai các tab chứa iFrame. Tôi biết iFrame là khủng khiếp, nhưng khi được sử dụng một cách chính xác là hữu ích để hiển thị các loại dữ liệu khác nhau.

Tôi có kinh nghiệm về các tab jQueryUI cho phép tôi hiển thị bên trong các tab của iFrame. Tuy nhiên tôi không thể tìm thấy bất kỳ tài liệu nào để làm điều tương tự với Bootstrap.

Từ góc độ jQueryUI Tôi đã làm điều này trong quá khứ:

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

Trên đây là tiến bộ hơn tiêu chuẩn jQueryUI Tab implementation.It cho phép tôi để off-đặt tải của iFrame cho đến tab là do người dùng chọn là cách tốt nhất để thực hiện khi tải nhiều trang, v.v.

Tuy nhiên, tôi không thể thấy cách tương tự với Bootstrap.

Tìm con trỏ ở đây.

Cheers Nick

Answer 1

Dưới đây là một giải pháp sử dụng một tùy chỉnh dữ liệu thuộc tính và một số jQuery. Hoặc xem jsFiddle đang hoạt động của cùng một giải pháp cho 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>