如何只使用jQuery垂直调整DIV大小 - 没有插件？

Question

编辑:我把这段代码放在jsbin:http://jsbin.com/eneru

---

我试图让用户使用jQuery调整(仅垂直)DIV元素.我读了关于jQuery UI的文章,我试过了,几分钟后,我就开始了.但是这个库增加了~25KB的开销,我想避免,因为我只想要简单的垂直大小调整.

所以我试着自己做.这是HTML,我使用内联样式清晰:

<div id="frame" style="border: 1px solid green; height: 350px">
    <div style="height: 100%">Lorem ipsum blah blah</div>
    <span id="frame-grip" style="display: block; width: 100%; height: 16px; background: gray"></span>
</div>

如您所见,DIV元素下方有一个小条,因此用户可以向上或向下拖动它以调整DIV的大小.这是Javascript代码(使用jQuery):

$(document).ready(function(){
    var resizing = false;
    var frame = $("#frame");
    var origHeightFrame = frame.height();
    var origPosYGrip = $("#frame-grip").offset().top;
    var gripHeight = $("#frame-grip").height();


    $("#frame-grip").mouseup(function(e) {
        resizing = false;
    });

    $("#frame-grip").mousedown(function(e) {
        resizing = true;
    });

    $("#frame-grip").mousemove(function(e) {
        if(resizing) {
            frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2);
        }
    });
});

它或多或少都有效,但是如果你拖动它太快,它会在鼠标移动后停止并且一切都会中断.

这是我第一次尝试用JS和jQuery 做一些严肃的事情(咳咳),所以我可能会做一些愚蠢的事情.如果是这样,请告诉我:)

Answer 1

你正在做一些愚蠢的事:你正试图自己做.

听我说,听我说:跨浏览器的Javascript是一个可怕的,可怕的事情.许多版本中有许多引擎都有许多不同的操作系统,所有这些引擎都有许多细微之处,所有这些都使得Javascript非常难以使用.有一个很好的理由可以解释为什么像jQuery(及其扩展版)这样的librabries已经大受欢迎:许多优秀的程序员花费了大量的时间来抽象出所有这些可怕的不一致性,所以我们不必担心它.

现在,我不确定您的用户群,也许您正在迎合仍然有拨号的老家庭主妇.但是在大多数情况下,在这个时代,最初的页面加载(因为它将在之后缓存)达到25KB,因为它可以在所有浏览器中始终如一地工作,这是一个很小的代价.在Javascript方面没有"简单"调整大小的功能,所以最好使用UI.

Answer 2

我做了类似的事情,设法让它以最大和最小高度工作,对我来说似乎工作非常流畅,这是我的代码.

    $(document).ready(function()
{
    var resizing = false;
    var frame = $("#frame").height();

    $(document).mouseup(function(event)
    {
        resizing = false;
        frame = $("#frame").height();
    });

    $("#frame-grip").mousedown(function(event)
    {
        resizing = event.pageY;
    });

    $(document).mousemove(function(event)
    {
        if (resizing)
        {
            $("#frame").height(frame + resizing - event.pageY);
        }
    });
});

我如何使用它的实例,拉红色按钮,缺少图像所以我用简单的颜色替换.http://jsbin.com/ufuqo/23