Pola grup

Artykuł ten opisuje sposób zawierania elementów w grupach.

Pola grup

Język HTML dostarcza elementu fieldset, który może być zastosowany do grupowania elementów razem. Granicą jest zazwyczaj obrys wokół elementów, aby pokazać, że są one powiązane. Przykład będzie pole grupowe zawierające pola wyboru. XUL dostarcza odpowiedni element groupbox, który może być zastosowany w podobnym celu.

Jak wskazuje nazwa, groupbox jest typem pola, oznacza to, że elementy wewnątrz niego ustawione są według reguł pól. Istnieją dwie różnice pomiędzy polami grup a polami regularnymi:

• Domyślnie pole grupy jest otoczone elementem bevel. Możesz zmienić to zachowanie przez zmianę stylu CSS,
• Pole grupy obsługuje element caption, który jest umieszczony w górnej części obramowania.

Ponieważ pola grup są typami grup, możesz użyć takich samych atrybutów jak orient i flex. Możesz wstawić jakiekolwiek elementy, jakie chcesz wewnątrz pola, chociaż zazwyczaj będą one powiązane w ten sam sposób.

Etykieta u góry pola grupy może zostać utworzona przy zastosowaniu elementu caption. Działa on podobnie jak element legend z języka HTML. Pojedynczy element caption umieszczony jako pierwsze dziecko będzie wystarczające.

Przykład: Proste pole grupy

Poniższy przykład pokazuje proste pole grupy:

var el = env.locale; Przykład 1 : Źródła Podgląd

<groupbox>
  <caption label="Odpowiedź"/>
  <description value="Banany"/>
  <description value="Tangerine"/>
  <description value="Budka telefoniczna"/>
  <description value="Kiwi"/>
</groupbox>

Spowoduje to, że będą wyświetlone cztery fragmenty tekstu otoczone przez pole z etykietą Odpowiedź. Zwróć uwagę, że pole grupy posiada domyślnie orientacje pionową, która jest konieczna, aby mieć stos elementów tekstu w pojedynczej kolumnie.

Bardziej złożony element caption

Możesz również dodać elementy potomne wewnątrz elementu caption, aby stworzyć bardziej złożony caption. Na przykład; panel preferencji Mozilla Font używa menu rozwijanego jako podpisu. Chociaż może być użyta dowolna zawartość, zazwyczaj będziemy używać pola wyboru lub menu rozwijanego.

var el = env.locale; Przykład 2 : Źródła Podgląd

<groupbox flex="1">
  <caption>
    <checkbox label="Włącz kopie zapasową"/>
  </caption>
  <hbox>
    <label control="dir" value="Folder:"/>
    <textbox id="dir" flex="1"/>
  </hbox>
  <checkbox label="Kompresuj archiwalne pliki"/>
</groupbox>

W tym przykładzie, pole wyboru zostały zastosowane jako podpis (caption). Możemy użyć skryptu do włączenia lub wyłączenia zawartości pola grup, kiedy checkbox jest zaznaczony lub odznaczony. Pole grupy zawiera poziome pudełko (box) z etykietą (label) i polem tekstowym (textbox). Zarówno pole tekstowe jak i pole grupy mogą być elementami elastycznymi, więc pole tekstowe rozszerza się, kiedy rozszerzamy okno. Poniżej pola tekstowego pojawia się dodatkowe pole wyboru, z powodu pionowej orientacji pola grupy. W kolejnym podpunkcie dodamy pole grupy do okna dialogowego Znajdź pliki.

Grupa radio

Możemy stosować element radiogroup do zgrupowania razem przycisków opcji. Element radiogroup jest typem pola. Możemy wstawić dowolny element, do wewnątrz niego, z wyjątkiem specjalnej obsługi przycisku radio, które działa podobnie jak inne pudełka.

Dowolny przycisk opcji umieszczony wewnątrz grupy przycisków opcji, aby zgrupować je wszystkie razem, nawet, jeśli są one wewnątrz zagnieżdżonych pudełek. Może to być stosowane do dodania dodatkowych elementów wewnątrz struktury, tak jak w tym przykładzie:

var el = env.locale; Przykład 3 : Źródła Podgląd

<radiogroup>
  <radio id="no" value="no" label="No Number"/>
  <radio id="random" value="random" label="Random Number"/>
  <hbox>
    <radio id="specify" value="specify" label="Specify Number:"/>
    <textbox id="specificnumber"/>
  </hbox>
</radiogroup>

Zauważ, że element radiogroup nie jest otoczony żadnym obramowaniem wokół siebie. Powinniśmy umieścić element groupbox wokół niego, jeśli obramowanie i podpis (caption) są wymagane.

Następnie będziemy stosować to, czego nauczyliśmy się dotychczas i dodamy dodatkowe elementy do okna dialogowego Znajdź pliki.