我想知道网站jsfiddle.net如何处理他们的textareas.当你调整一个,其他人缩小/增加大小.我一直试图用css定期做,但是当我调整一个时,另一个textarea在第一个textarea下弹出.像这样的东西.
|[ ][ ]|
resize work....
|[ ] |
[]
所以其他textarea下降. |是主页的一面,[]是textareas.
最佳答案
正如我在Chrome检查器中看到的那样,它们首先分为两列,其中position：absolute.左边的那个带有“left”css属性集,右边的那个带有“right”css属性集.
然后每列有两行,使用相同的方法,反之亦然(设置顶部和底部的css属性).
然后javascript进来.当拖动手柄时,每个列或行的高度或宽度都会更改为相同的总和.
编辑：在这里你可以看到来自jsfiddle的一些javascript.
onDrag_horizontal调整列的两行大小.它取手柄的位置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);
