如何只使用jQuery垂直调整DIV大小 - 没有插件？ [英] How to let resize vertically a DIV with only jQuery - no plugins?

问题描述

修改：我将这段代码放在jsbin中： http://jsbin.com/ eneru

---

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

所以我试着自己做。这是HTML，我使用内联样式清晰：

 < div id =framestyle =border ：1px纯绿色;高度：350px> 
< div style =height：100％> Lorem ipsum blah blah< / div> 
< span id =frame-gripstyle =display：block; width：100％; height：16px; background：grey>< / 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 （函数（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），所以我可能会做点蠢事。如果是这样，请告诉我：）

解决方案

你 做一些愚蠢的事：你是试着自己动手。

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

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

Edit: I put this snippet of code in jsbin: http://jsbin.com/eneru

---

I am trying to let the user resize (only vertically) a DIV element with jQuery. I read about jQuery UI, I tried it, and in some minutes, I had it working. But the library is adding a ~25KB overhead that I would like to avoid, since I only want simple vertical resizing.

So I tried to do it on my own. Here it is the HTML, I am using inline styling for clarity:

<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>

As you can see, there is a little bar under the DIV element, so the user can drag it up or down to resize the DIV. Here it is the Javascript code (using 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);
        }
    });
});

It works, more or less, but if you drag the bar too fast, it stops following the mouse movement and everything breaks.

It is the first time I try to do something serious (ahem) with JS and jQuery, so I may be doing something dumb. If so, please do tell me :)

解决方案

You are doing something dumb: You're trying to do it yourself.

Hear me out, hear me out: Javascript across browsers is a horrible, horrible thing. There are many engines in many versions with many different operating systems, all of which have many subtleties, all of which make Javascript pretty much hell to work with. There is a perfectly good reason why librabries such as jQuery (and their extensions) have exploded in popularity: a lot of great programmers have spent a lot of hours abstracting all these horrible inconsistencies away so we don't have to worry about it.

Now, I am not sure about your user base, maybe you are catering to old housewives that still have dialup. But for the most part in this day and age the 25KB hit on the initial page load (as it will be cached afterwards) for the peace of mind that this is going to work in all browsers consistently is a small price to pay. There is no such thing as "simple" resizing when it comes to Javascript, so you're better off using UI.

这篇关于如何只使用jQuery垂直调整DIV大小 - 没有插件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！