Kontrolki XUL

Przycisk, który może być naciśnięty przez użytkownika.

<button label="Save" accesskey="S"/>

• Więcej informacji o elemencie button.
• Dokumentacja przycisków

Przycisk, który posiada dołączone rozwijane menu. Naciskając przycisk otworzymy menu.

<button type="menu" label="View">
  <menupopup>
    <menuitem label="List"/>
    <menuitem label="Details"/>
  </menupopup>
</button>

• Więcej informacji o tym typie menu w elemencie button.
• Dokumentacja przycisków
• Podobne elementy: menupopup menuitem

Przycisk, który posiada odrębną strzałkę z załączonym do niej menu. W przeciwieństwie do przycisku typu "menu", po naciśnięciu na główną jego część może zostać wykonana oddzielna akcja.

<button type="menu-button" label="New">
  <menupopup>
    <menuitem label="New Document"/>
    <menuitem label="New Image"/>
  </menupopup>
</button>

• Więcej informacji o tym typie menu w elemencie button.
• Dokumentacja przycisków
• Podobne elementy: menupopup menuitem

Kontrolka, która może być włączona lub wyłączona, zazwyczaj stosujemy ją do utworzenia opcji, która może być włączona lub wyłączona.

<checkbox label="Show Toolbar Labels" checked="true"/>

• Więcej informacji o elemencie checkbox.
• Dokumentacja pola wyboru

Kontrolka pozwalająca użytkownikowi na wybór koloru.

<colorpicker color="#FF0000"/>

• Dokumentacja kontrolki Colorpicker

Specjalny typ kontrolki colorpicker, który pokazuje tylko przycisk, lecz po jego naciśnięciu wyświetli się okienko z możliwością wyboru koloru.

<colorpicker type="button" color="#CC0080"/>

• Dokumentacja kontrolki Colorpicker

Nowość w Mozilli 1.9 / Firefox 3

Ustawienie pola tekstowego, które może być zastosowane do wprowadzenia daty.

<datepicker value="2007/03/26"/>

• Dokumentacja kontrolki Datepicker

Nowość w Mozilli 1.9 / Firefox 3

Element datepicker, który wyświetla siatkę z wyborem daty.

<datepicker type="grid" value="2007/02/20"/>

• Dokumentacja kontrolki Datepicker

Nowość w Mozilli 1.9 / Firefox 3

Element datepicker, który wyświetla zbiór pól tekstowych do wprowadzenia daty, lecz posiada również przycisk, po którego naciśnięciu wyświetla się siatka kalendarza.

<datepicker type="popup" value="2008/08/24"/>

• Dokumentacja kontrolki Datepicker

Element description jest stosowany do tekstu opisowego.

<description>
  Select a time for the event to start
</description>

• Więcej informacji o elemencie description.
• Dokumentacja elementu Description

Element groupbox wyświetla pudełko z etykietą wokoło interfejsu kontrolek.

<groupbox>
  <caption label="Network"/>
</groupbox>

• Więcej informacji o elemencie groupbox.
• Dokumentacja elementu groupbox
• Podobne elementy: caption

Obrazek określony przez adres URL.

<image src="start.png"/>

• Więcej informacji o elemencie image.
• Dokumentacja elementu Image

Etykieta jest stosowana do tworzenia tekstu, który jest etykietą pobliskiej kontrolki.

<label control="volume" value="Volume:"/>

• Więcej informacji o elemencie label.
• Dokumentacja etykiety

Element listbox jest stosowany do zaznaczenia pozycji z listy pozycji będących etykietami.

<listbox>
  <listitem label="Chocolate"/>
  <listitem label="Jelly Beans"/>
</listbox>

• Więcej informacji o elemencie listbox.
• Dokumentacja elementu Listbox
• Podobne elementy: listcell listcols listcol listhead listheader listitem

Element menulist (lub combobox) jest stosowany do tworzenia kontrolki wyboru z rozwijanym menu.

<menulist>
  <menupopup>
    <menulist label="Lions" value="l"/>
    <menuitem label="Tigers" value="t"/>
    <menuitem label="Bears" value="b"/>
  </menupopup>
</menulist>

• Więcej informacji o elemencie menulist.
• Dokumentacja elementu menulist
• Podobne elementy: menupopup menuitem

Edytowalna lista menu jest jak standardowa lista menu oprócz tego, że zaznaczona wartość jest wyświetlana w polu tekstowym, gdzie może ona zostać bezpośrednio zmodyfikowana lub posłużyć do wpisania nowej wartości, której nie ma w menu po jego rozwinięciu.

<menulist editable="true">
  <menupopup>
    <menuitem label="Elephants" value="Elephants"/>
    <menuitem label="Kangaroos" value="Kangaroos"/>
    <menuitem label="Bats" value="Bats"/>
  </menupopup>
</menulist>

• Więcej informacji o elemencie listy menu do edycji.
• Dokumentacja elementu Menulist
• Podobne elementy: menupopup menuitem

Pasek postępu jest stosowany do wyświetlenia postępu długości zadania.

<progressmeter value="40"/>

• Więcej informacji o elemencie progressmeter.
• Dokumentacja elementu progressmeter

Przycisk opcji jest stosowany, gdy tylko jedna z zestawu opcji może zostać wybrana za jednym razem.

<radiogroup>
  <radio label="Light" value="light"/>
  <radio label="Heavy" value="heavy"/>
</radiogroup>

• Więcej informacji o elemencie radio.
• Dokumentacja przycisku opcji
• Podobne elementy: radiogroup

Element richlistbox wyświetla listę pozycji, gdzie jedna lub więcej z nich może zostać zaznaczona. W przeciwieństwie do elementu listbox, który został zaprojektowany, aby wyświetlać tylko tekst, richlistbox może wyświetlać dowolny typ zawartości.

<richlistbox>
  <richlistitem>
    <image src="happy.png"/>
  </richlistitem>
  <richlistitem>
    <image src="sad.png"/>
  </richlistitem>
  <richlistitem>
    <image src="angry.png"/>
  </richlistitem>
</richlistbox>

• Dokumentacja Richlistbox
• Podobne elementy: richlistitem

Nowość w Mozilli 1.9 / Firefox 3

Element scale wyświetla pasek z uchwytem, który może być przesuwany wzdłuż paska, aby wybrać wartości z określonego zakresu.

<scale min="1" max="10"/>

• Dokumentacja elementu Scale

Element textbox, który pozwala wprowadzić pojedynczą linię tekstu.

<textbox value="firefox"/>

• Więcej informacji o elemencie textbox.
• Dokumentacja elementu Textbox

Element textbox, który pozwala na wprowadzenie wieloliniowego tekstu.

<textbox multiline="true"/>

• Więcej informacji o wieloliniowym elemencie textbox.
• Dokumentacja elementu textbox

Element textbox, który dostarcza rozwijane menu pokazujące podpowiedzi, które mogłyby pasować do wpisywanego przez użytkownika tekstu. Użytkownik może zaznaczyć jedną z podpowiedzi, aby wstawić ją do pola tekstowego.

<textbox type="autocomplete" autocompletesearch="history"/>

• Dokumentacja elementu textbox

Nowość w Mozilli 1.9 / Firefox 3

Element textbox dla wprowadzanych liczb. Dwa przyciski strzałek są wyświetlane do przechodzenia między wartościami.

<textbox type="number" min="1" max="20"/>

• Dokumentacja elementu Textbox

Element textbox, który ukrywa typ znaków, stosowany w polach z hasłami.

<textbox type="password"/>

• Dokumentacja elementu textbox

Nowość w Mozilli 1.9 / Firefox 3

Element timepicker wyświetla zbiór pól tekstowych do wprowadzenia czasu.

<timepicker value="12:05"/>

• Dokumentacja elementu timepicker

Przycisk, który jest wyświetlany na pasku narzędzi.

<toolbarbutton label="Reload"/>

• Więcej informacji o elemencie toolbarbutton.
• Dokumentacja elementu toolbarbutton
• Podobne elementy: toolbar

Przycisk, który jest wyświetlony z załączonym rozwijalnym menu w sobie.

<toolbarbutton type="menu" label="Show">
  <menupopup>
    <menuitem label="Toolbars"/>
    <menuitem label="Status Bar"/>
  </menupopup>
</toolbarbutton>

• Więcej informacji o tym typie menu jest w elemencie toolbarbutton.
• Dokumentacja elementu Toolbarbutton
• Podobne elementy: menupopup menuitem toolbar

Przycisk na pasku narzędzi, który posiada odrębną strzałkę z załączonym do niej menu. W przeciwieństwie do przycisku typu "menu", po naciśnięciu na główną jego część może zostać wykonana oddzielna akcja.

<toolbarbutton type="menu-button" label="Open">
  <menupopup>
    <menuitem label="Open Changed Files"/>
    <menuitem label="Open All"/>
  </menupopup>
</toolbarbutton>

• Więcej informacji na temat tego typu elementów menu paska narzędzi.
• Dokumentacja przycisków paska narzędzi
• Podobne elementy: menupopup menuitem toolbar

Drzewo wyświetla hierarchię pozycji w wielu kolumnach.

<tree>
  <treecols>
    <treecol label="Name" flex="1"/>
    <treecol label="Size" flex="1"/>
  </treecols>
  <treechildren>
    <treeitem>
      <treerow>
        <treecell label="Popcorn"/>
        <treecell label="Large"/>
      </treerow>
    </treeitem>
    <treeitem>
      <treerow>
        <treecell label="Root Beer"/>
        <treecell label="Small"/>
      </treerow>
    </treeitem>
  </treechildren>
</tree>

• Więcej informacji o elemencie drzewa.
• Dokumentacja drzewa
• Podobne elementy: treecell treechildren treecol treecols treeitem treerow