0

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

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

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

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

的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'
        });
});

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

4

1 回答 1

0

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

于 2013-06-17T16:31:56.440 回答