0

カラーボックスにロードしているページ/フォームがあります。このページには、タブ セクションが含まれています。タブはカラーボックス内でうまく機能しますが、新しいタブが表示されたらカラーボックスのサイズを変更する必要があります。

Twitter ブートストラップのサンプル コードを使用してみました。

<script>
$('a[data-toggle="tab"]').on('shown', function (e) {
    e.target; // activated tab
    e.relatedTarget; // previous tab
    alert($(e.target).attr('href'));
    colorbox.resize();
})
</script>

これをフォームを呼び出すメインページに配置しましたが、何も起動されていません。これは、呼び出されるまでフォームが存在しないためだと思いますが、カラーボックスです。

作業タブを含む呼び出されたページ/フォームにスクリプトを追加しましたが、何も起動されていないようです。

私のタブのマークアップは次のとおりです。

<div class="tabbable tabs-left">
     <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">File/Image Upload</a></li>
        <li><a href="#tab2" data-toggle="tab">Images</a></li>
        <li><a href="#tab3" data-toggle="tab">Files</a></li>
     </ul>
     <div class="tab-content">
        <div class="tab-pane active" id="tab1">content</div>
        <div class="tab-pane active" id="tab2">content</div>
        <div class="tab-pane active" id="tab3">content</div>
     </div>
</div>

では...呼び出されたページに別のタブが表示されているときにカラーボックスのサイズを変更するにはどうすればよいですか?どのページにスクリプトを配置する必要がありますか?

ありがとう

4

3 に答える 3

0

スクリプトを中に入れてみてくださいready

$(function(){

$(document).on('shown', 'a[data-toggle="tab"]', function (e) {
    e.target; // activated tab
    e.relatedTarget; // previous tab
    alert($(e.target).attr('href'));
    colorbox.resize();
})

});

デモ:プランカー

于 2013-05-27T14:00:42.940 に答える
0

Bootstrap 3 では、次のコードはスイッチ タブで Colorbox ウィンドウのサイズを正しく変更しています。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    e.target; // activated tab
    e.relatedTarget; // previous tab
    $.colorbox.resize();
})
于 2014-07-05T23:58:26.260 に答える