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

我正在尝试创建一个页面布局，如

但我不知道如何实现这一目标。我的意思是；在该页面中，您可以看到页面中有两个区域，您可以使用它们之间的栏调整区域大小

---

谢谢

尝试使用HTML框架集标记

---

是的，当然有可能。可能有一个JQuery或MooTools插件可以实现这一点。否则，我将使用JQuery为您提供一个简单的示例，您可以使用它。看

HTML基本上是这样的：

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

​ 然后是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");
 }

var left=200；//起始左列宽度
var isClicked=false；
var startX=200；//调整器条的起始水平位置
var isMouseDown=错误；
//将侦听器附加到文档本身
$（文档）.mousedown（函数（）{
isMouseDown=真；
}).mouseup（函数（）{
isMouseDown=错误；
}).mousemove（函数（事件）{
如果（单击&isMouseDown）{
var newX=event.pageX；
如果（startX！=newX）{
左+=（newX-startX）；
if（左<0）{
left=0；//不要将滑块移动到屏幕左边缘之外
newX=0；
}
左柱的设置宽度（左）；
startX=newX；
}
}
});
//将单击侦听器附加到大小调整器滑块
$（“#垂直调整器”）.mousedown（函数（事件）{
isClicked=true；
startX=event.pageX；
}).mouseup（函数（事件）{
isClicked=false；
});
//函数可以调整所有内容的大小
函数setWidthOfLeftColumn（值）{
$（“#左”）.css（“宽度”，“左+像素”）；
$（“#right”）.css（“left”，“left+（left+4）+“px”）；
$（“#垂直调整器”）.css（“左”，“左+”px”）；
}

您想使用什么html？您能在JSFIDLE（jsFiddle.ne）1上创建一个演示吗。不要链接到学校。他们有一半的时间是错的。2.不惜一切代价避免使用框架集。我在编写之前发现了这一点。但为什么有人将此标记为否决票？我认为框架集非常适合我的目的。但我想知道你为什么不喜欢使用framesets@OlgunKaya--框架集是错误的代码。它们是非常古老的HTML，从很久以前就存在了。我为jQuery找到了这个插件。但是谢谢你提醒我！JQuery是一个非常强大和流行的框架。可能有很多不同的插件或扩展可供选择。

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");
 }