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做一些严重的（ahem），所以我可能会做一些愚蠢的事情。如果是这样，请告诉我:)）

Answer 1

你做一些愚蠢的事情：你是想自己做。

听我说，听我说：浏览器中的Javascript是一个可怕的，可怕的东西。许多版本中有许多引擎都有许多不同的操作系统，所有这些引擎都有许多细微之处，所有这些都使得Javascript非常难以使用。有一个很好的理由说明为什么像jQuery（及其扩展版）之类的librabries已经大受欢迎：许多伟大的程序员花费了大量的时间来抽象出所有这些可怕的不一致性，所以我们不必担心它。 / p>

现在，我不确定您的用户群，也许您正在迎合仍然有拨号的老家庭主妇。但是在大多数情况下，在这个时代，最初的页面加载（因为它将在之后缓存）达到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

Answer 3

我同意Paolo关于使用UI的观点，但是这里有一些修改代码以使其正常工作：

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

    $(document).mouseup(function(e) {
        resizing = false;
    });

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

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

Answer 4

通过仅在实际拖动时绑定mousemove函数，可以保存在未调整大小时调用无操作处理程序：

$(document).ready(function(){
    var resizing = function(e) {
        var frame = $("#frame");
        var origHeightFrame = frame.height();
        var origPosYGrip = $("#frame-grip").offset().top;
        var gripHeight = $("#frame-grip").height();
        frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2);
        return false;
    }

    var stopResizing = function(e) {
        $(document).unbind("mouseover", resizing);
    }

    $("#frame-grip").mouseup(stopResizing);

    $("#frame-grip").mousedown(function(e) {
        e.preventDefault();
        $(document).bind("mouseover", resizing).mouseup(stopResizing);
    });

});

（http://jsbin.com/ufuqo处的样本）

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

4 个答案: