Question

我正在尝试使用下一个插件 - LINK

正如你所看到的那样，它得到了很好的解释。

我想要做的事情非常简单 - 当代码在第一次加载时，分割器将在中间加载，如果屏幕尺寸已经改变，那么分割器也将位于中间（即使在更改窗口大小之前，用户已移动拆分器。）

为了做到这一点，我尝试了下一个简单的代码 -

    <html>
<head>
    <meta http-equiv="Content-Language" content="en" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery Horizontal Splitter</title>
    <script type="text/javascript" src="plug/jquery-2.0.0.js"></script>
    <script type="text/javascript" src="plug/jquery-splitter.js"></script>
    <script type="text/javascript" src="plug/jquery-splitter.min.js"></script>


    <style>

        #MySplitter {
    height: 200px;
    width: 100%;
    border: 5px solid #aaa;
}
#MySplitter div {
    overflow: auto;
}
.splitter-bar-vertical {
    width: 5px;
    background: #aaa;
}

    </style>
    <script>


        $().ready(function () {
            $("#MySplitter").splitter();
        });


        $(window).resize(function () {
            var width = $(window).width();
            $("#MySplitter").css("width", width).trigger("resize");

});


    </script>
</head>
<body>

    <div id="MySplitter">
        <div> Left content goes here </div>
        <div> Right content goes here </div>
    </div> 

</body>
</html>

那我在这里做错了什么？感谢您提供任何帮助

Answer 1

您只需要包含一个splitter.js文件 - splitter.min.js只是同一文件的最小化版本。

该网站上的演示也使用了jQuery（1.3）的早期版本 - 这似乎对插件有影响

See this example

它使用jsFiddle上允许的最早版本的jQuery并且似乎可以工作，但是如果你将jQuery库更改为v2.2（甚至v11）它将停止工作

根据您的评论更新了代码：

var splitterDiv = $("#MySplitter"); 
splitterDiv.splitter();

 $(window).resize(function () {
     var width = splitterDiv.width() / 2;
     splitterDiv.trigger("resize", [width]);
 });

Fully working example - needs to use jQuery 1.3

jQuery - 当屏幕重新调整大小时，如何使分割器处于中间位置

1 个答案: