6

サイトjsfiddle.netがテキストエリアをどのように扱っているのだろうか。1 つのサイズを変更すると、他のサイズが縮小/拡大します。私はcssで定期的にやろうとしてきましたが、サイズを変更すると、他のテキストエリアが最初のテキストエリアの下に表示されます。このようなもの。

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

他のテキストエリアがダウンします。| | はホームページの側面、[] はテキストエリアです。

4

2 に答える 2

3

Chrome インスペクターで確認できるように、最初は position:absolute で 2 つの列に分けられています。左側は「左」の css プロパティが設定されたもの、右側は「右」の css プロパティが設定されたものです。

次に、各列には 2 つの行があり、同じメソッドを逆に使用します (上部と下部の css プロパティが設定されています)。

次にjavascriptが登場します。ハンドルをドラッグすると、各列または行の高さまたは幅が同じ合計になるように変更されます。

編集:ここでは、jsfiddle の JavaScript をいくつか見ることができます。

onDrag_horizo​​ntal は、列の 2 行のサイズを変更します。ハンドル h ( ) の位置をvar top = (h.getPosition(this.content).y + h.getHeight() / 2) / this.content.getHeight() * 100;取得し、それに応じて 2 つの行の高さを設定します。

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 は同じことを行いますが、2 つの列のサイズを変更する垂直ハンドルを使用します。

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

私はあなたの助けを借りて今それを解決できると思います。私は相対位置を使用していましたが、テキストエリアがジャンプしないように絶対を使用する必要がありました。基本的なjavascriptのonresizeは他の要素には適用されず、ウィンドウだけに適用されるように見えるため、jQueryのサイズ変更可能なUIを使用しています。

基本的に、左のテキストエリアをサイズ変更可能にし、イベント「サイズ変更」に追加して、サイズ変更可能になると、他のテキストエリアの寸法が次のように変更されます。

$('#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 に答える