1

我正在使用 Jquery、fancybox、jScrollPane 和 Jquery Ui 选项卡制作 html 视频库。画廊使用 jquery ui 分成选项卡，然后每个选项卡托管一个 jScrollPane。为了在调整窗口大小时保持数据大小调整，编写了一个函数来更改容器的 css 并重新初始化 jscrollpanes。jquery的代码如下：

$('.thumbNails').jScrollPane({});
$('.Captions').jScrollPane();
$(window).resize(function(){
    $('.video__gallery_container').css('width',$(window).width()-40);
    $('.thumbNails').css('width','95%');
    $('.Captions').css('width','95%');
    $('.thumbNails').jScrollPane().reinitialize();
    $('.Captions').jScrollPane().reinitialize();
});

html：视频库 

    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <link rel="stylesheet" type="text/css" href="includes/video_gallery_ie.css" />
    <![endif]-->
</head>
<body>

    <div id="tabs" class="video_gallery_container">
        <ul>
            <li><a href="#tabs-1" class="tab">All</a></li>
            <li><a href="#tabs-2" class="tab">Pilots</a></li>
            <li><a href="#tabs-3" class="tab">Pilots</a></li>
            <li><a href="#tabs-4" class="tab">145 Repair Station</a></li>
            <li><a href="#tabs-5" class="tab">Supply</a></li>
        </ul>
        <div id="tabs-1" class="thumbNails">
                         <a href="#" rel="tooltip" title="first tooltip" class="videoLink" videowidth="800" videoheight="450" videofile="cycling_large"  videocaption="Caption for cycling_large goes here" ></a>
                         <a class="videoLink" videowidth="640" videoheight="360" videofile="ocean_medium" videocaption="Caption for ocean_medium goes here" ></a>
                         <a class="videoLink" videowidth="400" videoheight="250" videofile="winecountry_part1" videocaption="Caption for winecountry_part1 goes here"></a>
                         <a class="videoLink" videowidth="640" videoheight="402"  videofile="winecountry_part2" videocaption="Caption for winecountry_part2 goes here"></a>
                         <a class="videoLink" videowidth="860" videoheight="540" videofile="winecountry_part3" videocaption="Caption for winecountry_part3 goes here"></a>
                         <a class="videoLink" videowidth="300" videoheight="168" videofile="cycling_small"  videocaption="Caption for cycling_small goes here" ></a>
                         <div class="clear_both"></div></div>

        <div id="tabs-2" class="thumbNails">
                         <a class="videoLink" videowidth="860" videoheight="540" videofile="winecountry_part3" videocaption="Caption for winecountry_part3 goes here"></a>
                         <a class="videoLink" videowidth="300" videoheight="168" videofile="cycling_small"  videocaption="Caption for cycling_small goes here" ></a>
                         <div class="clear_both"></div></div>
        <div id="tabs-3" class="thumbNails">
                         <a class="videoLink" videowidth="800" videoheight="450" videofile="cycling_large"  videocaption="Caption for cycling_large goes here" ></a>
                         <a class="videoLink" videowidth="640" videoheight="360" videofile="ocean_medium" videocaption="Caption for ocean_medium goes here" ></a>
                         <div class="clear_both"></div></div>
        <div id="tabs-4" class="thumbNails">
                         <a class="videoLink" videowidth="400" videoheight="250" videofile="winecountry_part1" videocaption="Caption for winecountry_part1 goes here"></a>
                         <a class="videoLink" videowidth="640" videoheight="402"  videofile="winecountry_part2" videocaption="Caption for winecountry_part2 goes here"></a>
                         <a class="videoLink" videowidth="860" videoheight="540" videofile="winecountry_part3" videocaption="Caption for winecountry_part3 goes here"></a>
                         <div class="clear_both"></div></div>
        <div id="tabs-5" class="thumbNails">
                         <a class="videoLink" videowidth="860" videoheight="540" videofile="winecountry_part3" videocaption="Caption for winecountry_part3 goes here"></a>
                         <a class="videoLink" videowidth="300" videoheight="168" videofile="cycling_small"  videocaption="Caption for cycling_small goes here" ></a>
                         <div class="clear_both"></div></div>
    <div class="Captions"></div>
    </div>

    <!-- Hidden DIV container for video overlay code -->
    <div style="display: none;">
        <div id="videoPlayer"></div>
    </div>
<!-- Placed at the end of the document so the pages load faster-->
<script src="includes/bootstrap-tooltip.js"></script>
    <script src="includes/bootstrap-popover.js"></script>
    <script type="text/javascript" src="includes/jquery.jscrollpane.min.js"></script>
    <script type="text/javascript" src="includes/jquery.mousewheel.js"></script>
    <link type="text/css" href="includes/jquery-ui-1.8.20.custom/css/vader/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script type="text/javascript" src="includes/jquery-ui-1.8.20.custom/js/jquery-ui-1.8.20.custom.min.js"></script>

<script type="text/javascript">
$(function(){

    // Tabs
    $('#tabs').tabs();

    //hover states on the static widgets
    $('#dialog_link, ul#icons li').hover(
        function() { $(this).addClass('ui-state-hover'); },
        function() { $(this).removeClass('ui-state-hover'); 
    });
});
</script>

</body>
</html>

现在到问题的核心，代码运行完美，直到调整窗口大小，调整大小后，如果选择了选项卡，则不显示选项卡的内容，但是如果随后调整窗口大小，内容将出现。同样在调整大小后，如果选择了另一个选项卡，您可以返回在调整大小完成时加载的选项卡并且它仍然具有内容。我尝试使用诸如 $('.tab').live('click',function(){ $(this).trigger('resize'); }; 之类的代码手动触发调整大小事件；感谢您的帮助。

4

0 回答 0