我想知道JSFiddle是如何处理其文本区域的大小调整和布局的。

Question

我想知道网站jsfiddle.net是如何处理他们的文本区域的。当你调整一个文本区域的大小时，其他文本区域会缩小/增加大小。我一直在尝试使用CSS来实现这个效果，但是当我调整一个文本区域的大小时，其他文本区域会跑到第一个文本区域下面。就像这样。

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

所以另一个文本区域会下移。|代表主页的两侧，[]代表文本区域。

- Samir Alajmovic

---

你可以将所有文本区域绝对定位，然后仅更改它们的 top/left/bottom/right CSS 属性... - Šime Vidas

Answer 1

从Chrome检查器中可以看到，它们首先分为两列，采用position：absolute。左边的列设置了“left”CSS属性，右边的列设置了“right”CSS属性。

然后每个列都有两行，以相反的方式使用相同的方法（使用top和bottom CSS属性）。

然后进入javascript。当拖动手柄时，每个列或行的高度或宽度都会更改，以给出相同的总和。

编辑：在这里可以看到来自jsfiddle的一些JavaScript。

onDrag_horizontal重新调整一列的两行。它获取句柄h的位置并设置其高度，然后相应地设置两行的高度。

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);

- billy

---

我正在工作的项目需要3个文本区域，[][]，第三个在这两个下面。我不确定js fiddle在使用什么库，但我认为我可以用常规的JavaScript或jQuery来实现它。 - Samir Alajmovic

我推荐使用 jQuery。您可以像在 jsfiddle 中所解释的那样操作，不过要从两行开始，并将顶部行分为两列... - billy

你可以轻松修改这个jqueryui示例，使两列同时调整大小，以达到相同的宽度总和... http://jqueryui.com/demos/resizable/#synchronous-resize - billy

我们使用 MooTools - 我完全可以推荐它。 - zalun

Answer 2

我觉得现在有你的帮助，我能够解决它了。我之前使用的是相对位置，但应该使用绝对位置，这样文本区域就不会跳下去了。我正在使用jQuery的可调整大小UI，因为基本JavaScript中的onresize只适用于窗口而不适用于其他元素。

基本上，让左侧文本区域可调整大小，并添加事件“resize”，每当它可调整大小时，其他文本区域的尺寸也会随之改变，如下所示：

$('#rightBox').css('width', totalsize + (ui.originalSize.width - ui.size.width));
$('#rightBox').css('height', totalsize + (ui.originalSize.height- ui.size.height));

- Samir Alajmovic