javascript - jQuery - 如何使水平拆分器显示在中间,即使屏幕已重新调整大小时

标签 javascript jquery html css

首先我正在使用这个插件 - 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>

目前,如果假设我将分离器移动到一个白痴位置,然后我更改了屏幕高度,分离器将保持在它的位置。

知道我做错了什么吗?或者我可以做些什么来让它发挥作用?

在此先感谢您提供的任何帮助。

最佳答案

您的代码看起来没问题。

您可以试试这个,尽管它更像是一种整理而不是修复。

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

关于javascript - jQuery - 如何使水平拆分器显示在中间,即使屏幕已重新调整大小时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27250673/

相关文章:

javascript - 在 jest globalSetup 中创建连接时找不到 Typeorm 连接 "default"

javascript - 我可以在 Ruby on Rails 中使用 JavaScript 部分吗? Partial 正在尝试以 HTML 形式呈现

Javascript 性能 - 迭代 dom 并添加监听器

html - 每个 CSS3 框架重载比较?

html - 文本和按钮的响应式布局

javascript - 为什么我的图像在 HTML 页面中加载不一致?

Javascript Canvas 图像并不总是加载

javascript - 将项目插入数组会使数组无法排序?

javascript - Bootstrap数据表排序

javascript - 在选择元素的随机位置附加选项?