javascript – 我想知道js小提琴是如何处理他们关于调整大小和他们的layot的textareas

我想知道网站jsfiddle.net如何处理他们的textareas.当你调整一个,其他人缩小/增加大小.我一直试图用css定期做,但是当我调整一个时,另一个textarea在第一个textarea下弹出.像这样的东西.

|[   ][   ]|
resize work....
|[     ]   |
[]

所以其他textarea下降. |是主页的一面,[]是textareas.

最佳答案

正如我在Chrome检查器中看到的那样,它们首先分为两列,其中position：absolute.左边的那个带有“left”css属性集,右边的那个带有“right”css属性集.

然后每列有两行,使用相同的方法,反之亦然(设置顶部和底部的css属性).

然后javascript进来.当拖动手柄时,每个列或行的高度或宽度都会更改为相同的总和.

编辑：在这里你可以看到来自jsfiddle的一些javascript.

onDrag_horizo​​ntal调整列的两行大小.它取手柄的位置h(var top =(h.getPosition(this.content).y h.getHeight()/ 2)/ this.content.getHeight()* 100;)然后设置高度因此两行

var onDrag_horizontal = function(h) {
    var windows = h.getParent().getElements('.window');
    var top = (h.getPosition(this.content).y + h.getHeight() / 2) / this.content.getHeight() * 100;
    windows[0].setStyle('height',top + '%');
    windows[1].setStyle('height',100 - top + '%');
}.bind(this);

onDrag_vertical做同样的事情,但使用垂直句柄,它调整两列的大小

var onDrag_vertical = function(h) {
    var left = (h.getPosition(this.content).x + h.getWidth() / 2) / this.content.getWidth() * 100;
    this.columns[0].setStyle('width',left + '%');
    this.columns[1].setStyle('width',100 - left + '%');
}.bind(this);

原文地址：https://www.jb51.cc/css/427540.html