javascript - 模拟框架集分隔符行为

Question

HTML5 当前规范删除了该<frameset>标签。

有一个不错的功能，<frameset>没有它就不容易重现：

在框架集中，您可以使用鼠标更改分隔框架的线的位置。

在 JavaScript 中使用 DIV 时如何提供相同的功能？

我遇到了以下内容，这些内容展示了我正在寻找的行为。但是我想避免使用 JQuery，即使使用 jQuery 应该是首选方式。

Answer 1

在查看了您的示例小提琴之后，我可以说如果没有 jQuery，这实际上很容易。

那里的所有功能都只是简单的innerHTML操作style和事件订阅。

在没有 jQuery 的情况下直接重写该代码将是：

var i = 0;

document.getElementById("dragbar").onmousedown = function (e) {

    e.preventDefault();
    document.getElementById("mousestatus").innerHTML = "mousedown" + i++;
    window.onmousemove = function (e) {
        document.getElementById("position").innerHTML = e.pageX + ', ' + e.pageY;
        document.getElementById("sidebar").style.width = e.pageX + 2 + "px";
        document.getElementById("main").style.left = e.pageX + 2 + "px";
    };

    console.log("leaving mouseDown");
};

window.onmouseup = function (e) {
    document.getElementById("clickevent").innerHTML = 'in another mouseUp event' + i++;
    window.onmousemove = null;
};

所以这里是与纯 JS相同的小提琴。

---

编辑：正如@BenjaminGruenbaum 指出的那样，覆盖on*DOM 元素上的属性与指定新的事件处理程序不同。

在 DOM 元素上覆盖onmouseup, onload,等属性onclick是“旧”方式，因此即使在 JS 的石器时代也支持它。我上面的代码就是这样写的。

现在添加和删除事件处理程序的标准方法是addEventListener和removeEventListener。旧 IE 不支持它们（但这可以解决）。

它让您可以将无限数量的侦听器附加到同一个事件，并且它们不会相互干扰。

因此，可以通过以下方式实现相同的功能：

var i = 0;

function dragBarMouseDown(e) {
    e.preventDefault();
    document.getElementById("mousestatus").innerHTML = "mousedown" + i++;
    window.addEventListener("mousemove", windowMouseMove, false);
    console.log("leaving mouseDown");
}

function windowMouseMove(e) {
    document.getElementById("position").innerHTML = e.pageX + ', ' + e.pageY;
    document.getElementById("sidebar").style.width = e.pageX + 2 + "px";
    document.getElementById("main").style.left = e.pageX + 2 + "px";
}

function windowMouseUp(e) {
    document.getElementById("clickevent").innerHTML = 'in another mouseUp event' + i++;
    window.removeEventListener("mousemove", windowMouseMove, false);
}

document.getElementById("dragbar").addEventListener("mousedown", dragBarMouseDown, false);

window.addEventListener("mouseup", windowMouseUp, false);

小提琴。

请注意，在这种情况下，我的函数不是匿名的，因此如果您尚未在函数范围内，则用于范围界定的自执行函数在这里是有意义的。

Answer 2

这是@SoonDead 的纯粹而简单的答案的水平版本，带有底部架子和水平分隔线。

结果应如下所示：

在这里摆弄

var i = 0;

function dragBarMouseDown(e) {
    e.preventDefault();
    document.getElementById("mousestatus").innerHTML = "mousedown" + i++;
    window.addEventListener("mousemove", windowMouseMove, false);
    console.log("leaving mouseDown");
}

function windowMouseMove(e) {
        document.getElementById("position").innerHTML = e.pageX + ', ' + e.pageY;
        //document.getElementById("main").style.height = e.pageY + 2 + "px";
        document.getElementById("dragbar").style.top = e.pageY + 2 + "px";
        document.getElementById("bottomshelf").style.top = e.pageY + 17 + "px";
}

function windowMouseUp(e) {
    document.getElementById("clickevent").innerHTML = 'in another mouseUp event' + i++;
    window.removeEventListener("mousemove", windowMouseMove, false);
}

document.getElementById("dragbar").addEventListener("mousedown", dragBarMouseDown, false);

window.addEventListener("mouseup", windowMouseUp, false);

body, html {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}
#header {
    background-color: wheat;
    width:100%;
    height: 50px;
}
#main {
    background-color: BurlyWood;
    float: top;
    position: absolute;
    top:50px;
    width:100%;
    bottom: 38px;
    overflow-y: hidden;
}
#dragbar {
    background-color:grey;
    width:100%;
    float: top;
    top:120px;
    bottom:0px;
    height: 15px;
    cursor: row-resize;
    position:absolute;
}
#bottomshelf {
    background-color: IndianRed;
    width:100%;
    float: top;
    position: absolute;
    top:135px;
    bottom: 38px;

}
#footer {
    background-color: PaleGoldenRod;
    width:100%;
    height: 38px;
    bottom:0;
    position:absolute;
}

<div id="header">header <span id="mousestatus"></span>
 <span id="clickevent"></span>

</div>
<div id="main">main area:
The bottom shelf will slide over this.
</div>

<div id="dragbar">drag me up or down</div>

<div id="bottomshelf">
    
<span id="position"></span>

bottom shelf</div>

<div id="footer">footer</div>

Answer 3

我没有足够的声誉来为“SoonDead”的解决方案添加评论，所以我必须这样做。:-( 解决方案很好，对我来说很有效，除了 IE8

1）该行 e.preventDefault(); 对于IE8有两个问题

• 未定义参数“e”event。
• 没有为 e 定义 preventDefault 方法

所以上面的行被替换为： e = e || window.event; e.preventDefault ? e.preventDefault() : e.returnValue=false;

以上停止了错误（我在这里停止，因为我并不真正关心 IE8，但不希望为不幸的用户弹出错误框）。所以是的，在我的应用程序中，IE8 用户无法调整大小。

但是，我确实追了一点，发现了这些问题：

1. 代码流没有进入onmousemove函数
2. 由于我无法将 pageX 视为 IE8 调试器中的属性，因此e.pageX必须将其替换为e.clientXor （取决于您的情况）。e.screenX

Answer 4

以下是关于 SO 讨论的一些选项。

我个人的建议是jQuery Resizable。

正如 BenjaminGruenbaum 在评论中所说，jQuery就是JavaScript。如果您不想加载完整的 jQuery 库，则需要找到您需要的 jQuery 库的哪些部分并提取源 JavaScript 以使用。这当然是可行的。