Rozdzielacze

W tym artykule dowiemy się, jak dodać rozdzielacze do okna.

Rozdzielanie pudełka

Może wystąpić sytuacja, że będziemy chcieli wyświetlić okno podzielone na dwie sekcje, w którym użytkownik będzie mógł zmienić rozmiar. Przykładem jest okno przeglądarki Mozilli, gdzie możemy zmienić rozmiar paska strony, poprzez przeciągnięcie lub zawinięcie wspomnianego paska, który rozdziela dwie ramki. Możemy także ukryć pasek strony klikając go w miejscu "wcięcia".

Rozdzielacz tworzymy poprzez użycie elementu splitter. Ten element tworzy wąski pasek pomiędzy sekcjami, który pozwala na zmianę rozmiarów tych sekcji. Możemy umieścić rozdzielacz gdziekolwiek tylko będzie nam on pasował, a będzie on nam pozwalał nadal na zmianę rozmiaru elementów, które będą przed oraz za w tym samym pudełku.

Kiedy umieścimy rozdzielacz wewnątrz poziomego pudełka, rozdzielacz będzie pozwalał na zmianę rozmiaru w poziomie. Natomiast, kiedy rozdzielacz będzie umieszczony w pionowym pudełku, to będzie pozwalał na zmianę rozmiaru w pionie.

Składnia rozdzielacza jest następująca:

<splitter
    id="identifier"
    state="open"
    collapse="before"
    resizebefore="closest"
    resizeafter="closest">

Atrybuty są następujące:

id

Unikalny identyfikator rozdzielacza.

state

Sygnalizuje stan rozdzielacza. Domyślnie ustawiony jest na open, panel jest wtedy widoczny od początku. Może też przyjąć wartość collapsed, panel będzie wtedy schowany, a druga część pola będzie zajmować całą powierzchnię.

collapse

Sygnalizuje, która strona panelu powinna się zwinąć, kiedy rozdzielacz (grippy) zostanie kliknięty lub jego stan jest ustawiony na stan 'collapsed'. Ustaw before dla elementów przed rozdzielaczem lub after dla elementów po rozdzielaczu. Jeśli ustawisz none, które jest także domyślnie ustawiane, grippy rozdzielacza nie zwinie się, gdy je naciśniemy.

resizebefore

Kiedy przesuwamy rozdzielaczem, to zmieniają swój rozmiar elementy po lewej lub powyżej. Ten atrybut sygnalizuje, który element powinien zmienić swój rozmiar. Ustaw go na closest, aby element zmienił swój rozmiar natychmiast do lewej strony przed rozdzielaczem. Ustaw go na farthest, aby posiadać element, który jest najdalej położony od rozdzielacza po lewej stronie (jest to pierwszy element w pudełku). Domyślną wartością jest closest.

resizeafter

Kiedy przesuwamy rozdzielaczem, to zmieniają swój rozmiar elementy po prawej lub poniżej. Ten atrybut sygnalizuje, który element powinien zmienić swój rozmiar. Ustaw go na closest, aby element zmienił swój rozmiar natychmiast do prawej strony za rozdzielaczem. Ustaw go na farthest, aby posiadać element, który jest najdalej położony od rozdzielacza po prawej stronie (jest to ostatni element w pudełku). Ten atrybut także może być ustawiony na grow, w którym elementy po prawej stronie rozdzielacza nie zmieniają rozmiaru, kiedy jest przesuwany, lecz zamiast tego zmieni się rozmiar całego pudełka. Domyślną wartością jest closest.

Jeśli ustawimy atrybut collapse, to powinniśmy także dodać element grippy do wewnątrz splitter, dzięki któremu będzie możliwe zastosowanie zawijania elementu.

Przykład będzie w tym momencie niezwykle pomocny:

Przykład splitter

Źródła Podgląd

<vbox flex="1">
  <iframe id="content-1" width="60" height="20" src="w1.html"/>
  <splitter collapse="before" resizeafter="farthest">
    <grippy/>
  </splitter>
  <iframe id="content-2" width="60" height="20" src="w2.html"/>
  <iframe id="content-3" width="60" height="20" src="w3.html"/>
  <iframe id="content-4" width="60" height="20" src="w4.html"/>
</vbox>

W przykładzie stworzyliśmy cztery ramki i rozdzielacz, który został umieszczony pomiędzy pierwszą oraz druga ramką. Atrybut collapse został ustawiony na wartość before, co oznacza, że jeśli ustawimy grippy rozdzielaczowi i klikniemy go, to pierwsza ramka nie będzie wyświetlona i rozdzielacz zostanie przeniesiony na lewo. Grippy rozdzielacza jest rysowany na środku wewnątrz rozdzielacza.

Rozdzielacz posiada atrybut resizeafter o wartości farthest. To znaczy, że kiedy rozdzielacz jest przesuwany, najdalszy element poza rozdzielaczem będzie miał zmieniony rozmiar. W tym przypadku ramka 4 będzie miała zmieniony rozmiar.

Wartości nie określono dla resizebefore, więc przyjmie on wartość domyślną closest. W tym przypadku jest tylko jedna ramka przed rozdzielaczem, więc ramka 1 będzie miała zmieniony rozmiar.

Ramka 2 i 3 będą tylko zmieniały rozmiar, jeśli przesuniesz rozdzielacz tak daleko w prawo, że ramka 4 nie będzie się już mogła zmniejszyć.

Poniżej są cztery panele wraz z rozdzielaczem w stanie, gdy jest on zawinięty:

Na obrazku poniżej widać 4 panele i rozdzielacz przesunięty w prawo. Dwa środkowe panele 2 i 3 nie zmieniły rozmiaru natomiast 1 i 4 zmieniły. Na obrazku widać już tylko część czwartego, gdy przesuniemy rozdzielacz jeszcze dalej w prawo, środkowe panele też zaczną się zmniejszać.

Możemy stosować własności stylów takie jak min-width, max-height w ramkach do określenia minimalnej lub maksymalnej szerokości lub wysokości w pudełku. Stosując to, rozdzielacz wykryje rozmiary i nie pozwoli użytkownikowi na przesunięcie rozdzielacza poza minimalne lub maksymalne rozmiary pudełka.

Przykładowo, jeśli określimy minimalną szerokość panelu 4 na 30 pikseli, nie zmniejszy się on poniżej tej wartości, ale zrobi to reszta paneli. Dwa pozostałe panele będą się zmniejszyć. Jeśli ustawisz minimalną szerokość panelu 1 na 50 px, będzie można przesunąć rozdzielacz tylko o 10 px w lewo (szerokość początkowa wynosi 60 pikseli). Mimo to można będzie je zawinąć.

Możesz umieścić więcej niż jeden rozdzielacz w pudełku, jeśli tylko będziesz chciał, to można zawijać różne jego części. Podobnie do zawijania nie trzeba stosować do ramek, gdyż każdy element może być zawinięty.

Nasz przykład: Znajdź pliki

</tabbox>

 <iframe src="results.html"/>
 <splitter resizeafter="grow"/>
 
 <hbox>

Następnie zobaczymy, jak utworzyć pasek przewijania.