可调分页边界答案

【问题标题】：Adjustable page division boundary可调分页边界
【发布时间】：2013-03-05 12:54:40
【问题描述】：

我的 HTML 页面中有两列。

<div id="content">
  <div id="left"></div>
  <div id="right"></div>
</div>

每个都占半个页面

#content {
    height: 100%;
}

#left, #right {
    float: left;
    width: 50%;
    height: 100%; 
    overflow: auto;
}

我希望用户可以调整左右两半之间的边界。也就是说，用户可以在浏览页面时将边界向左或向右移动。有没有可能以某种方式做到这一点？

【问题讨论】：

您正在描述通常称为“拆分窗格”的内容。 stackoverflow.com/questions/12194469/…
我讨厌成为所有的“框架化”......但是有一些框架可以为你提供这个...... ExtJS，jQuery，dojo

标签： javascript html css

【解决方案1】：

是的，但它需要 JavaScript。要应用它，您当然可以设置每一边的width：

var leftPercent = 50;
function updateDivision() {
    document.getElementById('left').style.width = leftPercent + '%';
    document.getElementById('right').style.width = (100 - leftPercent) + '%';
}

现在您可以使用 leftPercent = 50; updateDivision() 来调整除法，但用户不会这样做。您可以通过多种不同的方式将其呈现给用户。可能最合适的方式是在他们可以拖动的中间一条小线。为此，您可以使用一点 CSS 进行定位：

#content {
    position: relative;
}
#divider {
    position: absolute;
    /* left to be set by JavaScript */
    width: 1px;
    top: 0;
    bottom: 0;
    background: black;
    cursor: col-resize;
    /* feel free to customize this, of course */
}

然后确保在content 中有一个div 和一个divider 的id，并更新updateDivision 以同时更新divider 的left：

document.getElementById('left').style.left = leftPercent + '%';

那么你只需要一点逻辑来处理拖动。（在这里，我已将所有元素放入适当命名的变量中）：

divider.addEventListener('mousedown', function(e) {
    e.preventDefault();
    var lastX = e.pageX;
    document.documentElement.addEventListener('mousemove', moveHandler, true);
    document.documentElement.addEventListener('mouseup', upHandler, true);
    function moveHandler(e) {
        e.preventDefault();
        e.stopPropagation();
        var deltaX = e.pageX - lastX;
        lastX = e.pageX;
        leftPercent += deltaX / parseFloat(document.defaultView.getComputedStyle(content).width) * 100;
        updateDivision();
    }
    function upHandler(e) {
        e.preventDefault();
        e.stopPropagation();
        document.documentElement.removeEventListener('mousemove', moveHandler, true);
        document.documentElement.removeEventListener('mouseup', upHandler, true);
    }
}, false);

您应该能够阅读它以了解它是如何工作的，但简而言之：它会在有人按下分隔线时进行监听。当他们这样做时，它将在他们移动鼠标时将侦听器附加到页面。当他们这样做时，它会更新变量并调用updateDivision 来更新样式。当它最终获得mouseup 时，它会停止在页面上侦听。

作为进一步的改进，您可以使每个元素在拖动时具有适当的cursor 样式，这样您的光标在拖动时不会闪烁。

Try it out.

【讨论】：

【解决方案2】：

部门里什么都没有，所以什么都不会发生。这就像写作：

<h1></h1>

更改 h1 的 CSS 并期望会有一些东西

【讨论】：