Zastanawiam się, jak js fiddle obsługuje ich textareas dotyczące zmiany rozmiaru i ich layot ​​

Question

Zastanawiam się, jak strona jsfiddle.net obsługuje ich textareas. Kiedy zmieniasz rozmiar, pozostałe zmniejszają rozmiar. Próbowałem robić to regularnie z css, ale kiedy zmieniam rozmiar jednego, drugi tekst wyskakuje pod pierwszym tekstem. Coś takiego.

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

, więc inne pliki tekstowe są niedostępne. The | są stronami stron domowych, a [...] są tekstami.

Answer 1

Jak widzę w inspektorze Chrome, są one najpierw rozdzielone w dwóch kolumnach, z pozycją: absolute. Ten po lewej z "lewym" zestawem właściwości css, a ten po prawej z "prawym" zestawem właściwości css.

Następnie każda kolumna ma dwa wiersze, które używają tej samej metody, odwrotnie (z ustawionymi właściwościami css górnego i dolnego).

Następnie pojawia się javascript. Gdy uchwyt zostanie przeciągnięty, wysokość lub szerokość pary każdej kolumny lub wiersza są zmieniane w celu podania tej samej sumy.

EDYCJA: Tutaj możesz zobaczyć niektóre javascript z jsfiddle.

onDrag_horizontal zmienia rozmiar dwóch rzędów kolumny. Zajmuje pozycję h uchwyt (var top = (h.getPosition(this.content).y + h.getHeight()/2)/this.content.getHeight() * 100;), a następnie ustawia wysokość dwóch rzędach odpowiednio

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 robi to samo, ale z pionowym uchwytem, ​​który zmienia rozmiar dwie kolumny

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

Answer 2

Myślę, że jestem w stanie rozwiązać to teraz z twoją pomocą, użyłem względnej pozycji i powinienem był używać absolutnego, więc textarea nie zeskoczył. Używam skalowalnego interfejsu jQuery, ponieważ wydaje się, że w podstawowym javascriptie jest on nie pasujący do innych elementów, tylko do okna.

Zasadniczo zrobić lewy textarea skalowalny i dodać do zmiany rozmiaru zdarzenia „”, że ilekroć jest skalowalny, wymiary inne pola tekstowe jak zmienić,

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