Edit:我把这段代码放在jsbin中:http://jsbin.com/eneru 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);
}
});
});
它或多或少是有效的,但如果你拖动栏太快,它就会停止跟随鼠标移动,一切都会中断。
这是我第一次尝试做某事serious(咳咳)使用 JS 和 jQuery,所以我可能做了一些愚蠢的事情。如果是这样,请告诉我:)
You are做一些愚蠢的事情:你试图自己做这件事。
听我说,听我说:跨浏览器的 JavaScript 是一件非常非常可怕的事情。有许多版本的许多引擎和许多不同的操作系统,所有这些都有很多微妙之处,所有这些都使得 Javascript 很难使用。 jQuery(及其扩展)等库的流行有一个非常好的理由:许多优秀的程序员花了很多时间来抽象出所有这些可怕的不一致,所以我们不必担心它。
现在,我不确定您的用户群,也许您正在迎合仍然使用拨号的老家庭主妇。但在当今时代,大多数情况下,初始页面加载时的 25KB 命中(因为它将在之后被缓存),因为这将在所有浏览器中一致地工作,这是一个很小的代价。对于 Javascript 来说,不存在“简单”调整大小这样的事情,因此最好使用 UI。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)