Question

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

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

有一点需要注意的是，我发现不合理的是，在拖动分离器时，两种类型，我都看到在jQuery库（1.7.2）中的最大调用堆栈超出错误，在camelCase方法中。

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

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上的高度：200px的内联样式来解决问题。稍后通过升级到更高版本的jquery和其他具有依赖项的库来解决此问题。 WPF / XAML最终成为了这个基础，这使得大部分内容无关紧要。

jQuery splitter问题div没有调整大小

1 个答案: