jQuery 拆分器问题 div 未调整大小

Question

我在 http://methvin.com/splitter/4psplitter.html 上使用 jQuery 分离器插件.在我的例子中，我需要垂直拆分两列，并在这两行内水平拆分。在其他帖子中，我看到有人提到使用不同的插件来实现这一点，不幸的是，其他人决定继续使用这个插件。

所有的拆分器都出现并且可以拖动，垂直的可以很好地工作，但是，水平的可以拖动但是它们不会调整大小。相反，较低的 div 在顶部 div 的顶部上下拖动，或者在它们之间创建一个间隙，就好像它们没有绑定(bind)一样。我将在下面发布我的布局。

这里要注意的一件事我发现不合理的是，在拖动分离器时，这两种类型，我在 jQuery 库 (1.7.2) 的 camelCase 方法中看到 max call stack exceeded 错误。

如果需要更多信息，请告诉我，我完全不知道为什么这些不起作用。

HTML:

<div id="splitContainer">
        <div id="leftSplitter">
            <div id="leftSplitterTopPane">
                <div class="webpartHeader" style="border-bottom: 5px solid white;">
                    <span class="webpartHeaderSpacer">Header</span>
                </div>
                <div id="LeftTop_Container" class="webpartBody" style="height: 200px; overflow: auto;">
                    <br />
                    <!--TopLeft-->
                </div>
            </div>
            <div id="leftSplitterBottomPane" style="border-right:5px solid white;">
                <div class="webpartHeaderBottom" style=" height:25px; border-top:5px solid white; ">
                    <span class="webpartHeaderSpacer">Header</span>
                </div>
                <div id="LeftBottom_Container" class="webpartBody">
                    <br />
                    <!--BottomLeft-->
                </div>
            </div>
        </div>
        <div id="rightSplitter">
            <div id="rightSplitterTopPane">
                <div class="webpartHeader" style="border-bottom: 5px solid white;">
                    <span class="webpartHeaderSpacer">Header</span>
                </div>
                <div id="RightTop_Container" class="webpartBody" style="height: 200px;">
                    <br />
                    <!--TopRight-->
                </div>
            </div>
            <div id="rightSplitterBottomPane">
                <div class="webpartHeaderBottom" style=" height:25px; border-top:5px solid white;">
                    <span class="webpartHeaderSpacer">Header</span>
                </div>
                <div id="RightBottom_Container" class="webpartBody">
                    <br />
                    <!--BottomRight-->
                </div>
            </div>
        </div>
   </div>

CSS:

#splitContainer {
height: 469px;
width: 100%;
}

#leftSplitter {
height: 480px;
width: 100%;
}

#rightSplitter {
height: 480px;
width: 100%;
}

#leftSplitterBottomPane div {
overflow: auto;
}

#leftSplitterTop div {
overflow: auto;
}

#rightSplittertopPane div {
overflow: auto;
}

#rightSplitterBottomPane div {
overflow: auto;
}

#splitContainer div {
overflow: hidden;
}

.hsplitbar {
height: 5px;
background: #aaa;
margin-bottom: 2px;
}

.vsplitbar {
width: 5px;
background: #aaa;
top: 0;
}

#RightBottom_Container {
height:187px;
}

#LeftBottom_Container {
height:187px;
}

Javascript:

 $(document).ready(function () {

    $("#leftSplitter").splitter(
     {
         type: "h",
         accessKey: "J",
         resizeToHeight: true,
     });

    $("#rightSplitter").splitter(
      {
          type: "h",
          resizeToHeight: true,
          accessKey: "P"
      });

    $("#splitContainer").splitter(
        {
            type: "v",
            outline: false,
            sizeLeft: 250,
            resizeToWidth: true,
            accessKey: 'I'
        });
});

在开发期间修复；后来重构为不同的语言。不再相关。

Answer 1

已解决。我通过删除容器 div 上 height:200px 的内联样式解决了这个问题。后来通过升级到更高版本的 jquery 和其他具有依赖关系的库来解决这个问题。 WPF/XAML 最终成为这方面的基础，这使得大部分内容变得无关紧要。