0

我正在尝试创建这样的页面布局

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

谢谢！

4

2 回答 2

1

是的，这当然是可能的。那里可能有一个 JQuery 或 MooTools 插件可以做到这一点。否则，我为您提供了一个使用 JQuery 的简单示例，您可以使用它。请参阅此 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");
 }
于 2012-08-29T05:35:19.960 回答
0

尝试使用 HTML 框架集标记。

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

于 2012-08-29T05:31:19.423 回答