Kontrolki XUL
z Mozilla Developer Center, polskiego centrum programistów Mozilli.
Poniższa tabela przedstawia listę kontrolek dostarczanych przez język XUL użytkownikowi. Zobacz Kurs XUL, by dowiedzieć się, w jaki sposób są one używane oraz dokumentację XUL.
| <button>
Przycisk, który może być naciśnięty przez użytkownika. <button label="Save" accesskey="S"/> | 
|
| <button type="menu">
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>
| 
|
| <button type="menu-button">
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>
| |
| <checkbox>
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"/> | 
|
| <colorpicker>
Kontrolka pozwalająca użytkownikowi na wybór koloru. <colorpicker color="#FF0000"/> | |
| <colorpicker type="button">
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"/> | 
|
| <datepicker>
Nowość w Mozilli 1.9 / Firefox 3 Ustawienie pola tekstowego, które może być zastosowane do wprowadzenia daty. <datepicker value="2007/03/26"/> | 
|
| <datepicker type="grid">
Nowość w Mozilli 1.9 / Firefox 3 Element datepicker, który wyświetla siatkę z wyborem daty. <datepicker type="grid" value="2007/02/20"/> | 
|
| <datepicker type="popup" >
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"/> | |
| <description>
Element description jest stosowany do tekstu opisowego. <description> Select a time for the event to start </description> | 
|
| <groupbox>
Element groupbox wyświetla pudełko z etykietą wokoło interfejsu kontrolek. <groupbox> <caption label="Network"/> </groupbox>
| 
|
| <image>
Obrazek określony przez adres URL. <image src="start.png"/> | 
|
| <label>
Etykieta jest stosowana do tworzenia tekstu, który jest etykietą pobliskiej kontrolki. <label control="volume" value="Volume:"/> | 
|
| <listbox>
Element listbox jest stosowany do zaznaczenia pozycji z listy pozycji będących etykietami. <listbox> <listitem label="Chocolate"/> <listitem label="Jelly Beans"/> </listbox> | 
|
| <menulist>
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>
| 
|
| <menulist editable="true">
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>
| 
|
| <progressmeter>
Pasek postępu jest stosowany do wyświetlenia postępu długości zadania. <progressmeter value="40"/> | 
|
| <radio>
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>
| 
|
| <richlistbox>
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>
| 
|
| <scale>
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"/> | 
|
| <textbox>
Element textbox, który pozwala wprowadzić pojedynczą linię tekstu. <textbox value="firefox"/> | 
|
| <textbox multiline="true">
Element textbox, który pozwala na wprowadzenie wieloliniowego tekstu. <textbox multiline="true"/> | 
|
| <textbox type="autocomplete">
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"/> | |
| <textbox type="number">
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"/> | 
|
| <textbox type="password">
Element textbox, który ukrywa typ znaków, stosowany w polach z hasłami. <textbox type="password"/> | 
|
| <timepicker>
Nowość w Mozilli 1.9 / Firefox 3 Element timepicker wyświetla zbiór pól tekstowych do wprowadzenia czasu. <timepicker value="12:05"/> | 
|
| <toolbarbutton>
Przycisk, który jest wyświetlany na pasku narzędzi. <toolbarbutton label="Reload"/> | 
|
| <toolbarbutton type="menu">
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>
| |
| <toolbarbutton type="menu-button">
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>
| |
| <tree>
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>
| 
|