Javascript 如何调整DOM元素高度的大小?
我的ui中有一个小部件,它位于浏览器右下角的固定位置 我希望用户能够单击小部件的标题部分,并能够向上拖动它,有效地增加小部件的高度。小部件的底部、左侧和右侧属性将保持不变,但顶部应该能够更改,以允许小部件的最大高度达到其css最大高度定义的最大高度 有这样的例子吗?我知道jQueryUI具有可调整大小的行为,但不幸的是,我不能在这个项目上使用jQueryUI。然而,我们正在使用jQueryJavascript 如何调整DOM元素高度的大小?,javascript,html,css,resizable,jquery-resizable,Javascript,Html,Css,Resizable,Jquery Resizable,我的ui中有一个小部件,它位于浏览器右下角的固定位置 我希望用户能够单击小部件的标题部分,并能够向上拖动它,有效地增加小部件的高度。小部件的底部、左侧和右侧属性将保持不变,但顶部应该能够更改,以允许小部件的最大高度达到其css最大高度定义的最大高度 有这样的例子吗?我知道jQueryUI具有可调整大小的行为,但不幸的是,我不能在这个项目上使用jQueryUI。然而,我们正在使用jQuery 非常感谢您提供的任何提示、想法或示例。只是为了让我走上正确的方向。我看到一个CSS3可调整大小,它将标准大
非常感谢您提供的任何提示、想法或示例。只是为了让我走上正确的方向。我看到一个CSS3可调整大小,它将标准大小图标放在右下角,就像这个文本区域一样。这个插件可能有帮助吗
只需jQuery就可以做到这一点。在我脑子里,你可能会做这样的事情:
<div id="widget">
<h3 id="widget-header">Header</h3>
some content
</div>
<script language="javascript" type="text/javascript">
var clientY = 0;
var offset = null;
var changeSize = false;
$(function () {
$("#widget-header")
.mousedown(function (event) {
clientY = event.pageY;
offset = $("#widget").offset();
changeSize = true;
})
.mousemove(function (event) {
if (changeSize) {
// get the changes
var difY = event.pageY - clientY;
offset.top += difY;
// animate the changes
$("#widget").offset({ top: offset.top, left: offset.left });
$("#widget").height($("#widget").height() - difY);
// update the new positions
clientY = event.pageY;
}
})
.mouseup(function (event) { changeSize = false; })
.mouseout(function(event) { changeSize = false; });
});
</script>
隐马尔可夫模型。。。看看JQueryUI源代码,看看它是如何工作的?