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。首先解释一下。几乎所有代码都会监听用户点击垂直缩放器。一旦发生这种情况，它会监听鼠标移动。每次鼠标移动时，相应地调整列的大小，并将滑块保持在鼠标下方。当用户放开鼠标（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");
 }

Answer 2

尝试使用HTML框架集标记。

http://www.w3schools.com/tags/tag_frameset.asp

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

2 个答案: