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

【问题标题】：HTML vertical resizeable areas on the page页面上的 HTML 垂直可调整大小区域
【发布时间】：2012-08-29 13:52:33
【问题描述】：

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

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

谢谢！

【问题讨论】：

你想使用什么 html？你能在 jsFiddle(jsfiddle.ne) 上创建一个演示吗

标签： html css resize vbox hbox

【解决方案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");
 }

【讨论】：

我认为框架集非常适合我的目的。但我想知道你为什么不喜欢使用框架集
@OlgunKaya -- 框架集是糟糕的代码。它们是真正古老的 HTML，从那时起就一直存在。 This is a good article about the situation.
我找到了这个用于 jQuery 的 layout.jquery-dev.net/demos.cfm 插件。但是谢谢你警告我！
JQuery 是一个非常强大且非常流行的框架。可能有很多不同的插件或扩展可供选择。

【解决方案2】：

尝试使用 HTML 框架集标签。

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

【讨论】：

1.不要链接到 w3schools。他们有一半是错的。 2. 不惜一切代价避免使用框架集。
我在你写之前发现了这个。但是为什么有人将此标记为反对票？