Twitter Bootstrap iFrame utilisation?

Juste commencé à explorer de Twitter Bootstrap et j'aime ce que je vois. Cependant j'ai une question sur la façon de mettre en œuvre des Onglets qui contiennent un iFrame. Je sais que l'iFrame sont terribles, mais lorsqu'il est utilisé correctement sont utiles pour afficher les différents types de données.

J'ai l'expérience de jQueryUI Onglets qui me permet d'afficher l'iFrame à l'intérieur des onglets. Cependant je ne trouve aucune documentation à faire de même avec Bootstrap.

À partir d'un jQueryUI point de vue, je l'ai fait dans le passé:

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

Ci-dessus est plus avancée que la norme de jQueryUI Onglet mise en œuvre.Il me permet de compenser la charge de l'iFrame jusqu'à ce que l'onglet est sélectionné par l'utilisateur qui est le meilleur moyen de le faire lors du chargement de nombreuses pages, etc.

Cependant, je ne vois pas une manière similaire avec Bootstrap.

À la recherche pour les pointeurs ici les gars.

Cheers
Nick

InformationsquelleAutor Nick Green | 2012-11-09
  1. 8

    Ci-dessous est une solution en utilisant une mesure d'attribut data-et certains jQuery. Ou de regarder le travail jsFiddle de la même solution pour Bootstrap "LazyLoading" les 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>
    • qui a très bien fonctionné! Connaissez-vous des "redimensionner" fonction qui fonctionne avec Bootstrap? Dans le passé, j'ai eu une autre fonction pour faire ce qui est en désordre et je me demandais si quelque chose existait à l'intérieur de ce cadre?
    • Comment voulez-vous charger la première image? J'ai remarqué que c'hors-séries de la charge de l'iframe 2 et 3, mais iframe 1 ne charge que si je vais à un autre en premier. Pourrait faire avec chargement que lorsque la page se charge.
    • $(paneID).find("iframe").height($(window).height()-80); travaille pour la hauteur venez d'ajouter ceci à la fin de votre JS.
    • Concernant le premier onglet, oui, je suppose que si un iFrame étaient présents sur cet onglet, il y aurait alors la charge immédiatement. Dans ce cas, ne pas utiliser les données personnalisées-attribut; il vous suffit de remplir l'attribut src de l'iFrame, comme vous le feriez normalement.
    • J'ai pensé à cela, la bonne réponse. Merci pour l'aide!!
    • Génial merci

    InformationsquelleAutor technoTarek