7

Twitter の Bootstrap を調べ始めたところですが、気に入っています。ただし、iFrame を含むタブを実装する方法について質問があります。iFrame がひどいことは知っていますが、正しく使用すると、さまざまな種類のデータを表示するのに役立ちます。

タブ内に iFrame を表示できるようにする jQueryUI タブの経験があります。ただし、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 Tab 実装よりも高度です。これにより、ユーザーがタブを選択するまで iFrame のロードをオフセットすることができます。これは、多数のページをロードする場合などに最適な方法です。

しかし、Bootstrap では同様の方法が見当たりません。

ここでポインタを探しています。

乾杯ニック

4

1 に答える 1

8

以下は、カスタム データ属性といくつかの 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-09T13:52:41.650 に答える