Question

首先，我使用此插件 - jQuery Splitter。

现在我要做的就是在屏幕高度发生变化时，将分割器显示在中间位置。

为了做到这一点，我使用了下一个代码 -

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="jquery.splitter-0.14.0.js"></script>
    <link href="jquery.splitter.css" rel="stylesheet" />

    <script>
        jQuery(function ($) {
            var height = $(window).height();
            $('#foo').height(height).split({ orientation: 'horizontal', limit: 50 });
            $('#b').height(height / 2);
        });

        $(window).resize(function () {
            var height = $(window).height();
            console.log(height);
            $('#foo').height(height).split({ orientation: 'horizontal', limit: 50 });
            $('#b').height(height/2);
        });
    </script>

    <style>
        .splitter_panel .hsplitter{
            background-color:  #FF0000;
        }
    </style>
</head>
<body>
    <div id="foo">
        <div id="a">
            <div id="x">
                <div>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dolor nisl, in suscipit justo. Donec a enim et est porttitor semper at vitae augue. Proin at nulla at dui mattis mattis. Nam a volutpat ante. Aliquam consequat dui eu sem convallis ullamcorper.
                </div>
            </div>
        </div>
        <div id="b">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dolor nisl, in suscipit justo. Donec a enim et est porttitor semper at vitae augue. Proin at nulla at dui mattis mattis. Nam a volutpat ante. Aliquam consequat dui eu sem convallis ullamcorper. Nulla suscipit, massa vitae suscipit ornare, tellus est consequat nunc, quis blandit elit odio eu arcu. Nam a urna nec nisl varius sodales. Mauris iaculis tincidunt orci id commodo. Aliquam non magna quis tortor malesuada aliquam eget ut lacus. Nam ut vestibulum est. Praesent volutpat tellus in eros dapibus elementum. Nam laoreet risus non nulla mollis ac luctus felis dapibus. Pellentesque mattis elementum augue non sollicitudin. Nullam lobortis fermentum elit ac mollis. Nam ac varius risus. Cras faucibus euismod nulla, ac auctor diam rutrum sit amet. Nulla vel odio erat, ac mattis enim.
        </div>
    </div> 
</body>
</html>

目前，如果让我说我将分离器移到了克里汀位置然后我改变了屏幕高度，那么分离器就会停留在它的位置。

知道我做错了什么吗？或者也许我可以做些什么来使其发挥作用？

提前感谢您提供任何帮助。

Answer 1

您的代码看起来不错。

你可以试试这个，虽然它更像是一个整理而不是修复。

jQuery(function($) {
    $(window).on('resize', function() {
        var height = $(window).height();
        console.log(height);
        $('#foo').height(height).split({ orientation:'horizontal', limit:50 });
        $('#b').height(height / 2);
    }).trigger('resize');
});

如果它最初有效但在调整大小后没有，那么你必须得出结论：splitter无法重新调用。也许可以向作者申请改进，或者在重新调用之前找到销毁splitter的方法。

jQuery - 即使屏幕重新调整大小，如何使水平分割器显示在中间

1 个答案: