页面上的 HTML 垂直可调整大小区域

Question

我正在尝试创建类似 This 的页面布局

但我不确定如何实现它。我的意思是;在该页面中，您可以看到页面中有两个区域，您可以使用它们之间的栏调整区域的大小。

谢谢!

Answer 1

是的，这当然是可能的。可能有一个 JQuery 或 MooTools 插件可以做到这一点。否则，我向您展示了一个您可以使用的使用 JQuery 的简单示例。参见 this JSFiddle .

HTML 基本上是这样的:

<div id="left">Left column!</div>
<div id="verticalresizer">&nbsp;</div>
<div id="right">Right column!</div>​

然后它们是绝对定位的(为简单起见，从示例中删除了额外的 CSS):

html, body { 
    height: 100%; 
}

#left { 
    width: 200px; /* default starting width */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}
#right { 
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 204px; /* width of left col + 4 pixel wide resizer */
}
#verticalresizer { 
    background-color: black; /* so it can be seen */
    width: 4px;
    height: 100%;
    cursor: col-resize;
    position: absolute;
    top: 0;
    left: 200px; /* width of left col */
    bottom: 0;
}

然后是 JavaScript。先解释一下。几乎所有代码都会监听用户是否点击了垂直缩放器。一旦发生这种情况，它就会监听鼠标的移动。每次鼠标移动时，相应地调整列的大小并将 slider 保持在鼠标下方。当用户松开鼠标 (mouseup) 时，停止收听/调整大小。

var left = 200; // starting left col width
var isClicked = false;
var startX = 200; // starting horizontal position of resizer bar
var isMouseDown = false;

// attach listeners to the document itself
$(document).mousedown(function() {
    isMouseDown = true;
}).mouseup(function() {
    isMouseDown = false;
}).mousemove( function(event) {
    if (isClicked && isMouseDown) {
        var newX = event.pageX;

        if (startX != newX) {
            left += (newX - startX);
            if (left < 0) {
                left = 0; // keep from moving the slider beyond the left edge of the screen
                newX = 0;
            }
            setWidthOfLeftColumn( left );
            startX = newX;
        }
    }
});

// attach click listeners to the resizer slider
$("#verticalresizer").mousedown( function(event) {
    isClicked = true;
    startX = event.pageX;
}).mouseup( function (event) {
    isClicked = false;  
});

// function to resize everything
function setWidthOfLeftColumn( value ) {
    $("#left").css("width", "" + left + "px");
     $("#right").css("left", "" + (left + 4) + "px");
     $("#verticalresizer").css("left", "" + left + "px");
 }