Kontrolki wejścia

przez 5 współtwórców

XUL posiada elementy, które są podobne do kontrolek formularza HTML.

Pola tekstowe

HTML zawiera element input, który może zostać użyty do wprowadzania tekstu. XUL posiada podobny element, textbox, używany do pól tekstowych. Bez żadnych argumentów textbox tworzy pole, w którym użytkownik może wprowadzać tekst. Pola tekstowe akceptują wiele parametrów takich samych, jakie w języku HTML posiadają kontrolki wejścia. Niektóre z nich:

id
Unikatowy identyfikator, przez który możesz się odwoływać do pola tekstowego.
class 
Klasa stylu pola tekstowego.
value 
Jeśli chcesz, aby pole tekstowe posiadało domyślny tekst, podaj go jako wartość tego atrybutu.
disabled 
Ustaw na true, aby wyłączyć możliwość wprowadzania tekstu.
type 
Możesz ustawić wartość tego atrybutu na specjalną wartość password, tak aby pole tekstowe nie pokazywało wpisywanego tekstu. Często używa się tej wartości w przypadku pól do podawania hasła.
maxlength 
Maksymalna liczba znaków, jaka może zostać wprowadzona do pola.

Podczas, gdy w HTML-u z elementu input mogą być tworzone różne rodzaje pól (nie tylko tekstowych), w XUL-u dla każdego typu są oddzielne elementy. Następujący przykład ilustruje użycie pól tekstowych:

Element textbox

Źródła Podgląd

<label control="some-text" value="Wpisz jakiś tekst"/>
<textbox id="some-text"/>
<label control="some-password" value="Wpisz hasło"/>
<textbox id="some-password" type="password" maxlength="8"/>

W przykładzie textbox tworzone są pola, do których można wprowadzić tylko jeden wiersz tekstu. HTML posiada również element textarea, który jest używany do tworzenia większych obszarów do wprowadzania tekstu. W XUL-u w tym celu możesz z powodzeniem użyć elementu textbox -- osobny element nie jest potrzebny. Jeśli ustawisz atrybut multiline na true, wówczas pole tekstowe wyświetlone zostanie z wieloma wierszami. Dla przykładu:

Wieloliniowy textbox

Źródła Podgląd

<textbox multiline="true"
           value="To jest tekst, który powinien zostać zawinięty do kilku linii."/>

Tak jak w języku HTML dla textarea, możesz użyć atrybutów rows i cols do ustawienia rozmiaru pola. Powinna być ustawiona liczba wierszy i kolumn znaków potrzebnych do wyświetlenia.

Przykład: Znajdź pliki

Dodajemy teraz pole szukania do okna dialogowego Znajdź pliki. W tym celu użyjemy elementu textbox.

<label value="Szukaj dla:" control="find-text"/>
<textbox id="find-text"/>

<button id="find-button" label="Znajdź"/>
grafika:inputs1.png

Wstaw powyższy kod przed miejscem, w którym utworzyliśmy przyciski w poprzednim rozdziale. Jeśli otworzysz to okno, powinieneś zobaczyć okno podobne do obrazka znajdującego się obok.

Etykieta i pole wejściowe pojawiły się w oknie. Pole tekstowe jest w pełni funkcjonalne i możesz w nim pisać i zaznaczać tekst. Ponadto został użyty atrybut control, więc po kliknięciu label aktywne staje się pole tekstowe.

Pola wyboru i przyciski opcji

Dwa dodatkowe elementy stosowane są do tworzenia pól wyboru i przycisków opcji. Są one po prostu wariantami przycisków. Pola wyboru stosuje się do opcji, które mogą być włączone lub wyłączone. Przyciski opcji mogą być wykorzystane w podobnym celu, gdzie ze zbioru opcji może być zaznaczona tylko jedna pozycja.

Więcej podobnych atrybutów przycisków możemy stosować razem z polami wyboru i przyciskami opcji. Przykład poniżej pokazuje proste pole wyboru oraz przyciski opcji.

<checkbox id="case-sensitive" checked="true" label="Rozróżniaj wielkość liter"/>
<radio id="orange" label="Pomarańczowy"/>
<radio id="violet" selected="true" label="Fioletowy"/>
<radio id="yellow" label="Żółty"/>

Pierwsza instrukcja tworzy proste pole wyboru (checkbox). Kiedy użytkownik kliknie w pole wyboru, to pole będzie przełączone pomiędzy polem zaznaczonym i niezaznaczonym. Atrybut checked można zastosować do wskazania stanu domyślnego. Powinieneś ustawić wspomniany atrybut na true lub false. Do dołączenia etykiety obok pola wyboru zastosuj atrybut label. W przypadku przycisków radio powinieneś stosować atrybut selected zamiast atrybutu checked. Ustaw jego wartość na true, tak aby przycisk opcji był domyślnie zaznaczony lub pozostaw go bez zmian dla pozostałych przycisków opcji.

Element radiogroup

Aby połączyć kilka przycisków opcji w grupę, będziesz potrzebował użyć elementu radiogroup. Tylko jedna opcja z grupy może być w danej chwili zaznaczona. Zaznaczenie jednej pozycji będzie wyłączało wszystkie pozostałe opcje w tej samej grupie. Poniższy przykład demonstruje poruszane zagadnienie.

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

<radiogroup>
  <radio id="orange" label="Pomarańczowy"/>
  <radio id="violet" selected="true" label="Fioletowy"/>
  <radio id="yellow" label="Żółty"/>
</radiogroup>

Atrybuty

Podobnie jak przyciski, pola wyboru i przyciski opcji są zrobione z etykiety i obrazka, gdzie obrazek przełącza się pomiędzy zaznaczonym i niezaznaczonym, w momencie jego naciśnięcia. Pola wyboru posiadają wiele atrybutów takich samych jak przyciski:

label
Etykieta pola wyboru lub przycisku opcji.
disabled
Wyłącza lub włącza składnik, przy ustawieniu odpowiednio na true lub false.
accesskey 
Klawisz skrótu, który może być stosowany do zaznaczenia elementu. Użyta litera w etykiecie jest zwykle wyświetlona z podkreśleniem.

Przykład Znajdź pliki: Źródła Podgląd

W następnym artykule poznamy elementy do tworzenia kontrolek numerycznych.

Autorzy i etykiety dokumentu

Etykiety: 
Contributors to this page: teoli, Ptak82, Witia, Mgjbot, Wie wior
Ostatnia aktualizacja: teoli,