Stosy i pokłady

Może wystąpić potrzeba wyświetlenia elementów jako zbioru nakładających się kart. Do tego celu mogą być zastosowane elementy stosu i pokładu.

Kontenery

Każde pudełko XUL jest kontenerem mogącym zawierać jakiś inny element. Jest kilka elementów, które są wyspecjalizowanym typem pudełek, takich jak paski narzędzi oraz panele kart. Znacznik box tworzy najprostsze pudełko bez określonych własności. Jednakże wyspecjalizowane typy pudełek pracują jak regularne pudełka w sposób zorientowany (orient) na elementy znajdujące się wewnątrz nich, ale posiadają także dodatkowe cechy.

Faktycznie wiele komponentów może zawierać inne elementy. Widzieliśmy już, że przyciski mogą zawierać inne rzeczy poza domyślnymi. Pasek przewijania jest właśnie specjalnym typem pudełka, które tworzy swoje własne elementy, jeśli ich nie dostarczymy. Może być przesuwany także za pomocą uchwytu, poprzez złapanie i przesunięcie paska.

W kolejnych kilku rozdziałach wprowadzimy pewne elementy, które zostały zaprojektowane do przechowywania innych elementów. Są to wszystkie specjalne typy pudełek i pozwalają zastosować wszystkie atrybuty pudełka w sobie.

Stosy

Element stack jest prostym pudełkiem. Działa jak inne pudełka, ale posiada specjalną własność, która jest dzieckiem położonym na górze pozostałych elementów. Pierwsze dziecko stosu jest ustawiane na spodzie, drugie dziecko na nim, następnie w taki sam sposób trzecie i tak dalej kolejne. Na stosie może być ułożonych wiele elementów.

Własność orient ma mniejsze znaczenie na stosie jako potomek, niż jakby były ułożone jeden obok drugiego. Rozmiar stosu jest określony przez największego potomka, ale możemy zastosować własności CSS width, height, min-width i inne podobne własności zarówno ze stosem, jak i jego potomkami.

Element stack może być zastosowany dla przypadku, gdzie status wskazuje konieczność dodania ponad istniejący element. Na przykład, pasek postępu może zostać stworzony przy użyciu paska i etykiety umieszczonej na jego górze.

Jednym dogodnym zastosowaniem elementu stack jednak jest to, że możemy zastosować na nim pewną liczbę własności CSS. Na przykład, możemy stworzyć podobny efekt do własności cieniowania tekstu w bardzo prosty sposób:

Przykład stosu

Źródła Podgląd

<stack>
  <description value="Cieniowany" style="padding-left: 1px; padding-top: 1px; font-size: 15pt"/>
  <description value="Cieniowany" style="color: red; font-size: 15pt;"/>
</stack>
grafika:stacks1.png

Oba elementy description tworzą tekst o rozmiarze 15 punktów. Pierwszy jednak jest przesunięty w prawo oraz w dół o jeden piksel przez dodanie odstępu z lewej strony i góry. Wynikiem będzie uzyskanie tego samego wyrazu 'Cieniowanie' po raz drugi, lecz już lekko przesuniętego względem poprzedniego elementu. Drugi element description został napisany na czerwono, aby zobaczyć efekt w sposób bardzo wyraźny.

Metoda ta ma przewagę nad zastosowaniem text-shadow, ponieważ możesz całkowicie dodać styl cienia z wyjątkiem tekstu głównego. Możesz mieć swoje własne czcionki, podkreślenia lub rozmiar (możesz nawet stworzyć cień migający). Jest również użyteczny, ponieważ Mozilla nie może aktualnie obsługiwać cieniowania tekstu CSS. Wadą jest to, że obszar objęty cieniem stwarza większy rozmiar stosu. Cieniowanie jest bardzo użyteczne dla tworzenia nieaktywnego pojawienia się przycisków.

Cieniowanie z przykładem pokładu

Źródła Podgląd

<stack style="background-color: #C0C0C0">
  <description value="Wyłączony" style="color: white; padding-left: 1px; padding-top: 1px;"/>
  <description value="Wyłączony" style="color: grey;"/>
</stack>
grafika:stacks10.png

Ten układ tekstu i kolory cienia tworzą nieaktywność na dowolnej platformie.

Zauważ, że zdarzenia, takie jak kliknięcie myszką i naciskanie klawiszy, są przekazywane do elementu na szczycie stosu, to znaczy, do ostatniego elementu na stosie. Oznacza to, że przyciski będą działały poprawnie tylko jako ostatni element stosu.

Pokłady

Element deck również wystawia swoich potomków jeden nad drugim podobnie jak element stack, jednak pokład wyświetla tylko jeden ze swoich potomków w jednym czasie. Byłoby to użyteczne dla interfejsu kreatora, gdzie szereg podobnych paneli jest wyświetlanych w kolejności. Zamiast tworzenia oddzielnych okien i dodania przycisków nawigacyjnych do każdego z nich, stworzysz jedno okno i użyjesz podkładu, gdzie zawrzesz zmiany.

Podobnie jak stosy, bezpośredni potomek elementu deck formuje strony pokładu. Jeśli jest trzech potomków elementu deck, pokład będzie miał trzech potomków. Wyświetlana strona pokładu może być zmieniona przez ustawienie atrybutu selectedIndex elementu deck. Indeks jest to liczba, która identyfikuje, jaka strona jest wyświetlana. Strony są ponumerowane poczynając od zera. Więc pierwszy potomek pokładu to strona o indeksie 0, druga jest to strona o indeksie 1 i tak dalej.

Poniżej mamy przykład pokładu:

Przykład pokładu

Źródła Podgląd

<deck selectedIndex="2">
  <description value="To jest pierwsza strona"/>
  <button label="To jest druga strona"/>
  <box>
    <description value="To jest trzecia strona"/>
    <button label="To jest także trzecia strona"/>
  </box>
</deck>

Tu mamy trzy strony (pokłady), domyślnie będąc trzecią. Trzecia strona jest pudełkiem z dwoma elementami wewnątrz. Zarówno pudełko, jak i jego elementy wewnątrz stanowią stronę. Pokład będzie tak duży jak największy potomek, którym tu będzie strona trzecia.

Możesz przełączać strony stosując skrypt do modyfikacji atrybutu selectedIndex. Więcej o tym dowiesz się w rozdziale o zdarzeniach i DOM.

Następny artykuł opisuje, jak stos może być zastosowany do pozycjonowania elementów dziecka.

Autorzy i etykiety dokumentu

Autorzy tej strony: Ptak82, Witia, Mgjbot
Ostatnia aktualizacja: Witia,