Question

（首先，请允许我说我使用调整大小的回调阅读每个类似的帖子。我也尝试了Colorbox API，但找不到任何内容。）

我正在使用Colorbox插件。在插件内部，有jQuery UI选项卡。选项卡在颜色框内工作（即按预期切换和显示），但Colorbox在onComplete回调中获取选项卡的高度，这是在调用选项卡之前，并且仍然只是一系列堆叠的div。我知道这是因为我设置了一个警告，其中包含onComplete回调标签的高度，并且它足够高，以便在标签加载后，它们下方有大量的空白。

我正在尝试调整Colorbox的大小，并使用$ .colorbox.resize（）方法，但它没有按预期工作。我希望如果它调整大小，它会占用标签高度较小并相应调整的div，但没有任何变化。

我对粘贴HTML犹豫不决，因为它大约有600行。

这是JS :(注意：我正在使用一些插件，所有插件都按预期工作，所以我认为没有冲突）

    $(document).ready(function(){   
    var lightboxHeight = $(window).height() + 10; // Get height of window on load for declaring as height property of lightbox
    $('.edit-profile-text').colorbox({
        onComplete:function(){  
                $('#cboxLoadedContent').jScrollPane();  // Custom scrollbar plugin
                $('html').css('overflow-y', 'hidden');  // Hide scrollbar on load so background doesn't scroll
                $('#my-profile-tabs').tabs({            // jQuery UI Tabs
                    load: function(){
                        $('.tabs').height('100px'); }
                }); 
                $('.editable').editable("http://www.appelsiini.net/projects/jeditable/php/save.php", { // In place Editing
                    submit: 'Save',
                    cancel: 'Cancel'
                }); 
                $('.editable-textarea').editable("http://www.appelsiini.net/projects/jeditable/php/save.php", { // In place Editing
                    submit: 'Save',
                    cancel: 'Cancel',
                    type: 'textarea'
                });
                $('.datepicker').datepicker(); // jQuery UI datepicker
                $.fn.colorbox.resize(innerHeight);      
        },
        onClosed:function(){ 
                $('html').css('overflow-y', 'scroll'); // Bring scrollbar back on close
        },
        close: 'X',
        height: lightboxHeight,
        fixed: true // So that colorbox opens at the point on the document the user has scrolled to
    });
});

请注意$.fn.colorbox.resize(innerHeight);方法。没有运气。

我也尝试过非常糟糕的事情，例如将div的高度更改为onComplete回调中的最后一个函数，但没有任何改变。

这是缩写的HTML：

    <section class="tabs clearfix">

        <div id="my-profile-tabs" class="clearfix">

            <ul>
                <li><a href="#tabs-1">Personal</a></li>
                <li><a href="#tabs-2">My Info</a></li>
                <li><a href="#tabs-3">Match Me</a></li>
                <li><a href="#tabs-4">Settings</a></li>
            </ul>

            <div id="tabs-1">

                ...

            </div><!-- end #tabs-1 -->

            <div id="tabs-2">

                ...

            </div><!-- end #tabs-2 -->

            <div id="tabs-3">

                ...

            </div><!-- end #tabs-3 -->

            <div id="tabs-4">

                ...

            </div><!-- end #tabs-4 -->

        </div><!-- end #my-profile-tabs -->

</section><!-- end .tabs -->

因此，目标是Colorbox窗口的高度是合适的，并且它不会像标签下方的1700px空白一样添加（即，标签div在它们成为标签之前的高度）。

我浪费了太多时间在这上面而且非常沮丧。非常感谢任何帮助。

Answer 1

尝试这样的事情：

 $.colorbox.resize({
     innerHeight: lightboxHeight
});

加载jQuery UI选项卡后，Colorbox插件不会调整大小

1 个答案: