ट्विटर बूटस्ट्रैप iFrame उपयोग?

Question

बस ट्विटर के बूटस्ट्रैप की खोज करना शुरू कर दिया और मुझे वह पसंद है जो मैं देख रहा हूं। हालांकि मेरे पास एक आईफ्रेम युक्त टैब को कार्यान्वित करने के तरीके पर एक प्रश्न है। मुझे पता है IFrame भयानक हैं, लेकिन जब विभिन्न प्रकार के डेटा प्रदर्शित करने के लिए सही ढंग से उपयोग किया जाता है।

मुझे jQueryUI टैब का अनुभव है जो मुझे आईफ़्रेम के टैब के अंदर प्रदर्शित करने की अनुमति देता है। हालांकि मुझे बूटस्ट्रैप के साथ ऐसा करने के लिए कोई दस्तावेज नहीं मिल रहा है।

एक 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 के भार ऑफ सेट तक टैब है की अनुमति देता है उपयोगकर्ता द्वारा चुने गए जो कई पेज लोड करते समय इसे करने का सबसे अच्छा तरीका है।

हालांकि, मैं बूटस्ट्रैप के साथ एक समान तरीके से नहीं देख सकता।

यहां पॉइंटर्स के लिए खोज रहे हैं।

चीयर्स निक

Answer 1

नीचे एक समाधान एक कस्टम डेटा-विशेषता और कुछ jQuery का उपयोग कर रहा है। या 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>