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

Question

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

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

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

Answer 1

正如我在 Chrome 检查器中看到的，它们首先分为两列，位置为：绝对。左边的一个设置了“左”CSS 属性，右边的一个设置了“右”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);