Post ten będzie oparty o dwa pliki: checkboxes.xul oraz radiobuttons.xul, które umieściłem już w przeglądarce plików XUL. Zdecydowałem omówienie obu plików opisać w jednym poście ze względu na podobny układ rozmieszczenia poszczególnych pudełek w obu plikach. Przykłady te pokazują gdzie i jak możemy wykorzystać pola wyboru (checkbox) oraz przyciski opcji (radio).
W obu przykładach zastosowana została jedna funkcja setText, która służy temu, że podczas wybrania pola wyboru lub przycisku opcji, tuż pod przykładem pojawi się króciutki komentarz odnośnie naciśniętego elementu.
function setText(textID,val)
{
document.getElementById(textID).value=val;
}
Tuż po wczytaniu przykładów w każdej sekcji dotyczącej omówionym problemom, na jej spodzie znajduje się napis: (Brak). Dzięki zastosowaniu wspomnianej funkcji, po kliknięciu w jakikolwiek element, zamiast słowa (Brak), pojawi się krótki komentarz, wszystko dzięki zastosowaniu elementu description:
<description id="identyfikator-taki-sam-jak-w-przedstawionym-przykladzie" value="(Brak)" />
Element radio:
Element, który może być zaznaczamy lub odznaczamy. Przyciski opcji są prawie zawsze pogrupowane razem w jedną grupę. Tylko jeden przycisk opcji może być zaznaczony, wewnątrz tej samej grupy radiogroup. Użytkownik klikając w przycisk opcji, włączona go poprzez zaznaczenie opcji myszką lub poprzez klawiaturę i skróty klawiaturowe. Po zaznaczeniu jednego przycisku opcji, inny zostaje odznaczony. Do przykładu możemy bez problemów dodać etykietę, określoną za pomocą atrybutu label i zostanie dodana obok przycisku opcji.
Poniżej przykładowy kod przycisku opcji:
<radiogroup flex="1">
<description value="Przyciski opcji w różnych stanach."/>
<radio label="Zaznaczony" selected="true"
oncommand="setText('stan-tekstu','Zaznaczony');" />
<radio label="Normalny"
oncommand="setText('stan-tekstu','Normalny');" />
<radio label="Wyłączony" disabled="true"
oncommand="setText('stan-tekstu','Wyłączony');" />
<separator flex="1" />
<description id="stan-tekstu" value="(brak)" />
</radiogroup>
Wspomniałem o możliwości zaznaczenia pól opcji za pomocą klawiatury, czyli za pomocą klawisza Alt + klawisz z ze znakiem, który jest w etykiecie podkreślony:
<radiogroup flex="1">
<description value="Przyciski zawierające skróty klawiaturowe."/>
<description value="(Zdarzenie, jeśli nawet nie są zaznaczone)"/>
<radio label="Zwierzaki" accesskey="Z"
oncommand="setText('klawisz-skrotu-tekst','Zwierzaki');" />
<radio label="Niedźwiedz" accesskey="N"
oncommand="setText('klawisz-skrotu-tekst','Niedżwiedz');" />
<radio label="Kot" accesskey="K"
oncommand="setText('klawisz-skrotu-tekst','Kot');" />
<radio label="Pies" accesskey="P"
oncommand="setText('klawisz-skrotu-tekst','Pies');" />
<radio label="Puma" accesskey="U"
oncommand="setText('klawisz-skrotu-tekst','Puma');" />
<radio label="Ryba" accesskey="R"
oncommand="setText('klawisz-skrotu-tekst','Ryba');" />
<separator flex="1" />
<description id="klawisz-skrotu-tekst" value="(Brak)" />
</radiogroup>
Jak widać po przykładzie za klawisze skrótu odpowiada atrybut accesskey, któremu przyporządkowujemy klawisz (najlepiej jeśli jest to pierwsza litera etykiety). W przypadku gdy w naszej grupie będzie już występował juz dany skrót to możemy dowolną wolną literę przypisać tej etykiecie. Tak jak to jest zrobione w opcji “Puma”.
Za rozmieszczenie przycisku opcji z lewej, z prawej, powyżej lub poniżej etykiety odpowiadają atrybuty:
Zobaczmy to na przykładzie:
<radiogroup flex="1">
<description value="Te przyciski opcji pokazują różne ich rozmieszczenie."/>
<radio label="Z lewej"
oncommand="setText('tekst-etykiety','Przycisk opcji z lewej strony etykiety');" />
<radio label="Z prawej" dir="reverse"
oncommand="setText('tekst-etykiety','Przycisk opcji z prawej strony etykiety');"/>
<radio label="Powyżej" orient="vertical" dir="forward"
oncommand="setText('tekst-etykiety','Przycisk opcji powyżej etykiety');"/>
<radio label="Poniżej" orient="vertical" dir="reverse"
oncommand="setText('tekst-etykiety','Przycisk opcji poniżej etykiety');"/>
<radio
oncommand="setText('tekst-etykiety','Przycisk opcji bez etykiety');" />
<radio
oncommand="setText('tekst-etykiety','Kolejny przycisk opcji bez etykiety');" />
<separator flex="1" />
<description id="tekst-etykiety" value="(Brak)" />
</radiogroup>
Aby dodać do tego obrazek, wystarczy dopisać atrybut src do elementu radio.
Element checkbox:
Element, który możemy zaznaczany lub odznaczany. Domyślnie jest interpretowany jako puste pudełko, kiedy element jest odznaczony i jako zaznaczone pudełko, kiedy element jest włączony. Posiadamy możliwość włączenia stanu pola wyboru poprzez zaznaczenie pudełka kursorem myszki. Etykieta, określona z atrybutem label, może być dodana obok pola wyboru, tak jak w polu opcji.
<description value="Pokazuje stan pola wyboru." />
<checkbox flex="1" label="Domyslny" default="true"
oncommand="setText('stan-tekstu','Domyślny');" />
<checkbox flex="1" label="Zaznaczony" checked="true"
oncommand="setText('stan-tekstu','Zaznaczony');" />
<checkbox flex="1" label="Normalny"
oncommand="setText('stan-tekstu','Normalny');" />
<checkbox flex="1" label="Wyłączony" disabled="true"
oncommand="setText('stan-tekstu','Wyłączony');" />
<separator flex="1" />
<description id="stan-tekstu" value="(Brak)" />
Wszystkie powyższe przykłady zastosowane do przycisku opcji, można bez problemów zastosować do pola wyboru. Oba przykłady możemy obejrzeć w przeglądarce plików XUL. Cały kod źródłowy znajdziecie w “przeglądarce” na karcie “Kod źródłowy” lub po prostu przejść do kodu w postaci tekstowej obu przykładów:
Dodatkowe informacje są zawarte w dokumentacji XUL oraz w kursie XUL.
. Szerzej o przyciskach pisałem w artykule: “XUL Przyciski okna“. W “przeglądarce” XUL zamieściłem plik w którym zobaczymy różne możliwości wykorzystania przycisków:
