6

我想知道网站 jsfiddle.net 是如何处理他们的文本区域的。当您调整一个大小时，其他的会缩小/增大大小。我一直在尝试使用 css 定期执行此操作，但是当我调整一个大小时，另一个 textarea 会在第一个 textarea 下弹出。像这样的东西。

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

所以其他文本区域下降。该| ment 是主页的两侧，而 [] 是 textareas。

4

2 回答 2

3

正如我在 Chrome 检查器中看到的那样，它们首先分为两列，位置：绝对。左边的一个带有“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);
于 2012-09-22T03:47:20.677 回答
0

我想我现在可以在你的帮助下解决它，我使用的是相对位置，我应该使用绝对位置，所以 textarea 不会跳下来。我正在使用 jQuery 的可调整大小的 ui，因为基本 javascript 中的 onresize 似乎不适用于其他元素，仅适用于窗口。

基本上使左侧文本区域可调整大小并添加到事件“调整大小”中，只要它可调整大小，其他文本区域的尺寸就会发生变化，例如，

$('#rightBox').css('width', totalsize + (ui.originalSize.width - ui.size.width));
$('#rightBox').css('height', totalsize + (ui.originalSize.height- ui.size.height));
于 2012-09-22T11:01:08.077 回答