mozilla

Revision 116028 of Controles XUL

  • Slug da revisão: Controles_XUL
  • Título da revisão: Controles XUL
  • ID da revisão: 116028
  • Criado:
  • Autor: fscholz
  • É revisão atual? Sim
  • Comentário remove use of mediawiki template; 80 words removed

Conteúdo da revisão

A tabela a seguir lista todas as interfaces providas pelo XUL. Veja o Tutorial XUL para um guia passo-a-passo de como elas são utilizadas e a Referência XUL para uma referência rápida.

<button>

Um botão que pode ser pressionado pelo usuário.

<button label="Save" accesskey="S"/>
Image:Controlsguide-button.png
<button type="menu">

A button that has a drop down menu attached to it. Pressing the button opens the menu.

<button type="menu" label="View">
  <menupopup>
    <menuitem label="List"/>
    <menuitem label="Details"/>
  </menupopup>
</button>
Image:Controlsguide-button-menu.png
<button type="menu-button">

A button that that has a separate arrow button with a menu attached to it. Unlike with the 'menu' type, a separate action may be performed when the main part of the button is pressed.

<button type="menu-button" label="New">
  <menupopup>
    <menuitem label="New Document"/>
    <menuitem label="New Image"/>
  </menupopup>
</button>
Image:Controlsguide-button-menubutton.png
<checkbox>

A control that may be turned on and off, typically used to create options which may be enabled or disabled.

<checkbox label="Show Toolbar Labels" checked="true"/>
Image:Controlsguide-checkbox.png
<colorpicker>

A control that may be used to select a color.

<colorpicker color="#FF0000"/>
Image:Controlsguide-colorpicker.png
<colorpicker type="button">

A specialized type of color picker which shows only a button but when pressed, a popup will be displayed to select a color from.

<colorpicker type="button" color="#CC0080"/>
Image:Controlsguide-colorpicker-button.png
<datepicker>

New in Mozilla 1.9 / Firefox 3

A set of textboxes which may be used to allow the entry of a date.

<datepicker value="2007/03/26"/>
Image:Controlsguide-datepicker.png
<datepicker type="grid">

New in Mozilla 1.9 / Firefox 3

A datepicker which displays a calendar grid for selecting a date.

<datepicker type="grid" value="2007/02/20"/>
Image:Controlsguide-datepicker-grid.png
<datepicker type="popup" >

New in Mozilla 1.9 / Firefox 3

A datepicker which displays a set of textboxes for date entry, but also has a button for displaying a popup calendar grid.

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

The description element is used to for descriptive text.

<description>
  Select a time for the event to start
</description>
Image:Controlguide-description.png
<groupbox>

A groupbox displays a labelled box around other user interface controls.

<groupbox>
  <caption label="Network"/>
</groupbox>
Image:Controlguide-groupbox.png
<image>

An image specified by a URL.

<image src="start.png"/>
Image:Controlguide-image.png
<label>

A label is used to create text which labels a nearby control.

<label control="volume" value="Volume:"/>
Image:Controlguide-label.png
<listbox>

The listbox is used to select an item from a list of labelled items.

<listbox>
  <listitem label="Chocolate"/>
  <listitem label="Jelly Beans"/>
</listbox>
Image:Controlguide-listbox.png
<menulist>

A menulist (or combobox) is used to create a control with a drop down to select a value.

<menulist>
  <menupopup>
    <menulist label="Lions" value="l"/>
    <menuitem label="Tigers" value="t"/>
    <menuitem label="Bears" value="b"/>
  </menupopup>
</menulist>
Image:Controlguide-menulist.png
<menulist editable="true">

An editable menulist is like a standard menulist except that the selected value is displayed in a textbox where it may be modified directly or values not in the popup list may be entered.

<menulist editable="true">
  <menupopup>
    <menuitem label="Elephants" value="Elephants"/>
    <menuitem label="Kangaroos" value="Kangaroos"/>
    <menuitem label="Bats" value="Bats"/>
  </menupopup>
</menulist>
Image:Controlguide-menulist-editable.png
<progressmeter>

A progress meter is used to display the progress of a lengthy task.

<progressmeter value="40"/>
Image:Controlguide-progressmeter.png
<radio>

A radio button is used when only one of a set of options may be selected at a time.

<radiogroup>
  <radio label="Light" value="light"/>
  <radio label="Heavy" value="heavy"/>
</radiogroup>
Image:Controlguide-radio.png
<richlistbox>

The richlistbox displays a list of items where one or more may selected. Unlike the listbox which is designed to display only text, the richlistbox may display any type of content.

<richlistbox>
  <richlistitem>
    <image src="happy.png"/>
  </richlistitem>
  <richlistitem>
    <image src="sad.png"/>
  </richlistitem>
  <richlistitem>
    <image src="angry.png"/>
  </richlistitem>
</richlistbox>
Image:Controlguide-richlistbox.png
<scale>

New in Mozilla 1.9 / Firefox 3

A scale displays a bar with a thumb that may be slid across the bar to select between a range of values.

<scale min="1" max="10"/>
Image:Controlguide-scale.png
<textbox>

A textbox which allows a single line of text to be entered.

<textbox value="firefox"/>
Image:Controlguide-textbox.png
<textbox multiline="true">

A textbox which allows multiple lines of text to be entered.

<textbox multiline="true"/>
Image:Controlguide-textbox-multiline.png
<textbox type="autocomplete">

A textbox which provides a dropdown showing matches that would complete what the user types. The user can select one to have it filled into the textbox.

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

New in Mozilla 1.9 / Firefox 3

A textbox for entering numbers. Two arrow buttons are displayed for cycling through values.

<textbox type="number" min="1" max="20"/>
Image:Controlguide-textbox-number.png
<textbox type="password">

A textbox that hides the characters typed, used for entering passwords.

<textbox type="password"/>
Image:Controlguide-textbox-password.png
<timepicker>

New in Mozilla 1.9 / Firefox 3

A timepicker displays a set of textboxes for entering a time.

<timepicker value="12:05"/>
Image:Controlguide-timepicker.png
<toolbarbutton>

A button that is displayed on a toolbar.

<toolbarbutton label="Reload"/>
Image:Controlguide-toolbarbutton.png
<toolbarbutton type="menu">

A button that is displayed on a toolbar with a drop down menu attached to it.

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

A button on a toolbar that that has a separate arrow button with a menu attached to it. Unlike with the 'menu' type, a separate action may be performed when the main part of the button is pressed.

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

A tree displays a hierarchy of items in multiple columns.

<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>
Image:Controlguide-tree.png

Categorias

Interwiki Language Links

{{ languages( { "en": "en/XUL_controls" } ) }}

Fonte da revisão

<p>A tabela a seguir lista todas as interfaces providas pelo XUL. Veja o <a href="/pt/Tutorial_XUL" title="pt/Tutorial_XUL">Tutorial XUL</a> para um guia passo-a-passo de como elas são utilizadas e a <a href="/pt/Referência_XUL" title="pt/Referência_XUL">Referência XUL </a> para uma referência rápida.</p>
<table border="1" cellpadding="6"> <tbody> <tr> <td><strong>&lt;button&gt;</strong> <p>Um botão que pode ser pressionado pelo usuário.</p> <pre>
&lt;button label="Save" accesskey="S"/&gt;
</pre> <ul> <li><a href="/pt/XUL_Tutorial/Adicionando_Botões" title="pt/XUL_Tutorial/Adicionando_Botões">Mais informações sobre o elemento button</a>.</li> <li><a href="/pt/XUL/button" title="pt/XUL/button">Button Referência</a></li> </ul> </td> <td><img alt="Image:Controlsguide-button.png" class=" internal" src="/@api/deki/files/2532/=Controlsguide-button.png"></td> </tr> <tr> <td><strong>&lt;button type="menu"&gt;</strong> <p>A button that has a drop down menu attached to it. Pressing the button opens the menu.</p> <pre>
&lt;button type="menu" label="View"&gt;
  &lt;menupopup&gt;
    &lt;menuitem label="List"/&gt;
    &lt;menuitem label="Details"/&gt;
  &lt;/menupopup&gt;
&lt;/button&gt;
</pre> <ul> <li><a href="/pt/XUL_Tutorial/More_Button_Features#Button_with_menupopup" title="pt/XUL_Tutorial/More_Button_Features#Button_with_menupopup">More information about this type of menu button element</a>.</li> <li><a href="/pt/XUL/button" title="pt/XUL/button">Button Reference</a></li> <li>Related Elements: {{ XULElem("menupopup") }} {{ XULElem("menuitem") }}</li> </ul> </td> <td><img alt="Image:Controlsguide-button-menu.png" fileid="0" src="File:pt/Media_Gallery/Controlsguide-button-menu.png"></td> </tr> <tr> <td><strong>&lt;button type="menu-button"&gt;</strong> <p>A button that that has a separate arrow button with a menu attached to it. Unlike with the 'menu' type, a separate action may be performed when the main part of the button is pressed.</p> <pre>
&lt;button type="menu-button" label="New"&gt;
  &lt;menupopup&gt;
    &lt;menuitem label="New Document"/&gt;
    &lt;menuitem label="New Image"/&gt;
  &lt;/menupopup&gt;
&lt;/button&gt;
</pre> <ul> <li><a href="/pt/XUL_Tutorial/More_Button_Features#Button_with_menupopup" title="pt/XUL_Tutorial/More_Button_Features#Button_with_menupopup">More information about this type of menu button element</a>.</li> <li><a href="/pt/XUL/button" title="pt/XUL/button">Button Reference</a></li> <li>Related Elements: {{ XULElem("menupopup") }} {{ XULElem("menuitem") }}</li> </ul> </td> <td><span class="comment">Image:Controlsguide-button-menubutton.png<br> </span></td> </tr> <tr> <td><strong>&lt;checkbox&gt;</strong> <p>A control that may be turned on and off, typically used to create options which may be enabled or disabled.</p> <pre>
&lt;checkbox label="Show Toolbar Labels" checked="true"/&gt;
</pre> <ul> <li><a href="/pt/XUL_Tutorial/Input_Controls#Checkboxes_and_Radio_Elements" title="pt/XUL_Tutorial/Input_Controls#Checkboxes_and_Radio_Elements">More information about the checkbox element</a>.</li> <li><a href="/pt/XUL/checkbox" title="pt/XUL/checkbox">Checkbox Reference</a></li> </ul> </td> <td><img alt="Image:Controlsguide-checkbox.png" fileid="0" src="File:pt/Media_Gallery/Controlsguide-checkbox.png"></td> </tr> <tr> <td><strong>&lt;colorpicker&gt;</strong> <p>A control that may be used to select a color.</p> <pre>
&lt;colorpicker color="#FF0000"/&gt;
</pre> <ul> <li><a href="/pt/XUL/colorpicker" title="pt/XUL/colorpicker">Colorpicker Reference</a></li> </ul> </td> <td><span class="comment">Image:Controlsguide-colorpicker.png</span></td> </tr> <tr> <td><strong>&lt;colorpicker type="button"&gt;</strong> <p>A specialized type of color picker which shows only a button but when pressed, a popup will be displayed to select a color from.</p> <pre>
&lt;colorpicker type="button" color="#CC0080"/&gt;
</pre> <ul> <li><a href="/pt/XUL/colorpicker" title="pt/XUL/colorpicker">Colorpicker Reference</a></li> </ul> </td> <td><img alt="Image:Controlsguide-colorpicker-button.png" fileid="0" src="File:pt/Media_Gallery/Controlsguide-colorpicker-button.png"></td> </tr> <tr> <td><strong>&lt;datepicker&gt;</strong> <p><strong><span class="highlightred"><small>New in Mozilla 1.9 / Firefox 3</small></span></strong></p> <p>A set of textboxes which may be used to allow the entry of a date.</p> <pre>
&lt;datepicker value="2007/03/26"/&gt;
</pre> <ul> <li><a href="/pt/XUL/datepicker" title="pt/XUL/datepicker">Datepicker Reference</a></li> </ul> </td> <td><img alt="Image:Controlsguide-datepicker.png" fileid="0" src="File:pt/Media_Gallery/Controlsguide-datepicker.png"></td> </tr> <tr> <td><strong>&lt;datepicker type="grid"&gt;</strong> <p><strong><span class="highlightred"><small>New in Mozilla 1.9 / Firefox 3</small></span></strong></p> <p>A datepicker which displays a calendar grid for selecting a date.</p> <pre>
&lt;datepicker type="grid" value="2007/02/20"/&gt;
</pre> <ul> <li><a href="/pt/XUL/datepicker" title="pt/XUL/datepicker">Datepicker Reference</a></li> </ul> </td> <td><img alt="Image:Controlsguide-datepicker-grid.png" fileid="0" src="File:pt/Media_Gallery/Controlsguide-datepicker-grid.png"></td> </tr> <tr> <td><strong>&lt;datepicker type="popup" &gt;</strong> <p><strong><span class="highlightred"><small>New in Mozilla 1.9 / Firefox 3</small></span></strong></p> <p>A datepicker which displays a set of textboxes for date entry, but also has a button for displaying a popup calendar grid.</p> <pre>
&lt;datepicker type="popup" value="2008/08/24"/&gt;
</pre> <ul> <li><a href="/pt/XUL/datepicker" title="pt/XUL/datepicker">Datepicker Reference</a></li> </ul> </td> <td> </td> </tr> <tr> <td><strong>&lt;description&gt;</strong> <p>The description element is used to for descriptive text.</p> <pre>
&lt;description&gt;
  Select a time for the event to start
&lt;/description&gt;
</pre> <ul> <li><a href="/pt/XUL_Tutorial/Adding_Labels_and_Images#Description_Element" title="pt/XUL_Tutorial/Adding_Labels_and_Images#Description_Element">More information about the description element</a>.</li> <li><a href="/pt/XUL/description" title="pt/XUL/description">Description Reference</a></li> </ul> </td> <td><img alt="Image:Controlguide-description.png" fileid="0" src="File:pt/Media_Gallery/Controlguide-description.png"></td> </tr> <tr> <td><strong>&lt;groupbox&gt;</strong> <p>A groupbox displays a labelled box around other user interface controls.</p> <pre>
&lt;groupbox&gt;
  &lt;caption label="Network"/&gt;
&lt;/groupbox&gt;
</pre> <ul> <li><a href="/pt/XUL_Tutorial/Groupboxes" title="pt/XUL_Tutorial/Groupboxes">More information about the groupbox element</a>.</li> <li><a href="/pt/XUL/groupbox" title="pt/XUL/groupbox">Groupbox Reference</a></li> <li>Related Elements: {{ XULElem("caption") }}</li> </ul> </td> <td><img alt="Image:Controlguide-groupbox.png" fileid="0" src="File:pt/Media_Gallery/Controlguide-groupbox.png"></td> </tr> <tr> <td><strong>&lt;image&gt;</strong> <p>An image specified by a URL.</p> <pre>
&lt;image src="start.png"/&gt;
</pre> <ul> <li><a href="/pt/XUL_Tutorial/Adding_Labels_and_Images#Images" title="pt/XUL_Tutorial/Adding_Labels_and_Images#Images">More information about the image element</a>.</li> <li><a href="/pt/XUL/image" title="pt/XUL/image">Image Reference</a></li> </ul> </td> <td><img alt="Image:Controlguide-image.png" fileid="0" src="File:pt/Media_Gallery/Controlguide-image.png"></td> </tr> <tr> <td><strong>&lt;label&gt;</strong> <p>A label is used to create text which labels a nearby control.</p> <pre>
&lt;label control="volume" value="Volume:"/&gt;
</pre> <ul> <li><a href="/pt/XUL_Tutorial/Adding_Labels_and_Images#Label_Element" title="pt/XUL_Tutorial/Adding_Labels_and_Images#Label_Element">More information about the label element</a>.</li> <li><a href="/pt/XUL/label" title="pt/XUL/label">Label Reference</a></li> </ul> </td> <td><img alt="Image:Controlguide-label.png" fileid="0" src="File:pt/Media_Gallery/Controlguide-label.png"></td> </tr> <tr> <td><strong>&lt;listbox&gt;</strong> <p>The listbox is used to select an item from a list of labelled items.</p> <pre>
&lt;listbox&gt;
  &lt;listitem label="Chocolate"/&gt;
  &lt;listitem label="Jelly Beans"/&gt;
&lt;/listbox&gt;
</pre> <ul> <li><a href="/pt/XUL_Tutorial/List_Controls#List_Boxes" title="pt/XUL_Tutorial/List_Controls#List_Boxes">More information about the listbox element</a>.</li> <li><a href="/pt/XUL/listbox" title="pt/XUL/listbox">Listbox Reference</a></li> <li>Related Elements: {{ XULElem("listcell") }} {{ XULElem("listcols") }} {{ XULElem("listcol") }} {{ XULElem("listhead") }} {{ XULElem("listheader") }} {{ XULElem("listitem") }}</li> </ul> </td> <td><img alt="Image:Controlguide-listbox.png" fileid="0" src="File:pt/Media_Gallery/Controlguide-listbox.png"></td> </tr> <tr> <td><strong>&lt;menulist&gt;</strong> <p>A menulist (or combobox) is used to create a control with a drop down to select a value.</p> <pre>
&lt;menulist&gt;
  &lt;menupopup&gt;
    &lt;menulist label="Lions" value="l"/&gt;
    &lt;menuitem label="Tigers" value="t"/&gt;
    &lt;menuitem label="Bears" value="b"/&gt;
  &lt;/menupopup&gt;
&lt;/menulist&gt;
</pre> <ul> <li><a href="/pt/XUL_Tutorial/List_Controls#Drop-down_Lists" title="pt/XUL_Tutorial/List_Controls#Drop-down_Lists">More information about the menulist element</a>.</li> <li><a href="/pt/XUL/menulist" title="pt/XUL/menulist">Menulist Reference</a></li> <li>Related Elements: {{ XULElem("menupopup") }} {{ XULElem("menuitem") }}</li> </ul> </td> <td><img alt="Image:Controlguide-menulist.png" fileid="0" src="File:pt/Media_Gallery/Controlguide-menulist.png"></td> </tr> <tr> <td><strong>&lt;menulist editable="true"&gt;</strong> <p>An editable menulist is like a standard menulist except that the selected value is displayed in a textbox where it may be modified directly or values not in the popup list may be entered.</p> <pre>
&lt;menulist editable="true"&gt;
  &lt;menupopup&gt;
    &lt;menuitem label="Elephants" value="Elephants"/&gt;
    &lt;menuitem label="Kangaroos" value="Kangaroos"/&gt;
    &lt;menuitem label="Bats" value="Bats"/&gt;
  &lt;/menupopup&gt;
&lt;/menulist&gt;
</pre> <ul> <li><a href="/pt/XUL_Tutorial/List_Controls#Editable_menulist" title="pt/XUL_Tutorial/List_Controls#Editable_menulist">More information about the editable menulist element</a>.</li> <li><a href="/pt/XUL/menulist" title="pt/XUL/menulist">Menulist Reference</a></li> <li>Related Elements: {{ XULElem("menupopup") }} {{ XULElem("menuitem") }}</li> </ul> </td> <td><img alt="Image:Controlguide-menulist-editable.png" fileid="0" src="File:pt/Media_Gallery/Controlguide-menulist-editable.png"></td> </tr> <tr> <td><strong>&lt;progressmeter&gt;</strong> <p>A progress meter is used to display the progress of a lengthy task.</p> <pre>
&lt;progressmeter value="40"/&gt;
</pre> <ul> <li><a href="/pt/XUL_Tutorial/Progress_Meters" title="pt/XUL_Tutorial/Progress_Meters">More information about the progressmeter element</a>.</li> <li><a href="/pt/XUL/progressmeter" title="pt/XUL/progressmeter">Progressmeter Reference</a></li> </ul> </td> <td><img alt="Image:Controlguide-progressmeter.png" fileid="0" src="File:pt/Media_Gallery/Controlguide-progressmeter.png"></td> </tr> <tr> <td><strong>&lt;radio&gt;</strong> <p>A radio button is used when only one of a set of options may be selected at a time.</p> <pre>
&lt;radiogroup&gt;
  &lt;radio label="Light" value="light"/&gt;
  &lt;radio label="Heavy" value="heavy"/&gt;
&lt;/radiogroup&gt;
</pre> <ul> <li><a href="/pt/XUL_Tutorial/Input_Controls#Checkboxes_and_Radio_Buttons" title="pt/XUL_Tutorial/Input_Controls#Checkboxes_and_Radio_Buttons">More information about the radio element</a>.</li> <li><a href="/pt/XUL/radio" title="pt/XUL/radio">Radio Reference</a></li> <li>Related Elements: {{ XULElem("radiogroup") }}</li> </ul> </td> <td><img alt="Image:Controlguide-radio.png" fileid="0" src="File:pt/Media_Gallery/Controlguide-radio.png"></td> </tr> <tr> <td><strong>&lt;richlistbox&gt;</strong> <p>The richlistbox displays a list of items where one or more may selected. Unlike the listbox which is designed to display only text, the richlistbox may display any type of content.</p> <pre>
&lt;richlistbox&gt;
  &lt;richlistitem&gt;
    &lt;image src="happy.png"/&gt;
  &lt;/richlistitem&gt;
  &lt;richlistitem&gt;
    &lt;image src="sad.png"/&gt;
  &lt;/richlistitem&gt;
  &lt;richlistitem&gt;
    &lt;image src="angry.png"/&gt;
  &lt;/richlistitem&gt;
&lt;/richlistbox&gt;
</pre> <ul> <li><a href="/pt/XUL/richlistbox" title="pt/XUL/richlistbox">Richlistbox Reference</a></li> <li>Related Elements: {{ XULElem("richlistitem") }}</li> </ul> </td> <td><img alt="Image:Controlguide-richlistbox.png" fileid="0" src="File:pt/Media_Gallery/Controlguide-richlistbox.png"></td> </tr> <tr> <td><strong>&lt;scale&gt;</strong> <p><strong><span class="highlightred"><small>New in Mozilla 1.9 / Firefox 3</small></span></strong></p> <p>A scale displays a bar with a thumb that may be slid across the bar to select between a range of values.</p> <pre>
&lt;scale min="1" max="10"/&gt;
</pre> <ul> <li><a href="/pt/XUL/scale" title="pt/XUL/scale">Scale Reference</a></li> </ul> </td> <td><img alt="Image:Controlguide-scale.png" fileid="0" src="File:pt/Media_Gallery/Controlguide-scale.png"></td> </tr> <tr> <td><strong>&lt;textbox&gt;</strong> <p>A textbox which allows a single line of text to be entered.</p> <pre>
&lt;textbox value="firefox"/&gt;
</pre> <ul> <li><a href="/pt/XUL_Tutorial/Input_Controls#Text_Entry_Fields" title="pt/XUL_Tutorial/Input_Controls#Text_Entry_Fields">More information about the textbox element</a>.</li> <li><a href="/pt/XUL/textbox" title="pt/XUL/textbox">Textbox Reference</a></li> </ul> </td> <td><img alt="Image:Controlguide-textbox.png" fileid="0" src="File:pt/Media_Gallery/Controlguide-textbox.png"></td> </tr> <tr> <td><strong>&lt;textbox multiline="true"&gt;</strong> <p>A textbox which allows multiple lines of text to be entered.</p> <pre>
&lt;textbox multiline="true"/&gt;
</pre> <ul> <li><a href="/pt/XUL_Tutorial/Input_Controls#Multiline_textbox" title="pt/XUL_Tutorial/Input_Controls#Multiline_textbox">More information about the multiple line textbox element</a>.</li> <li><a href="/pt/XUL/textbox" title="pt/XUL/textbox">Textbox Reference</a></li> </ul> </td> <td><img alt="Image:Controlguide-textbox-multiline.png" fileid="0" src="File:pt/Media_Gallery/Controlguide-textbox-multiline.png"></td> </tr> <tr> <td><strong>&lt;textbox type="autocomplete"&gt;</strong> <p>A textbox which provides a dropdown showing matches that would complete what the user types. The user can select one to have it filled into the textbox.</p> <pre>
&lt;textbox type="autocomplete" autocompletesearch="history"/&gt;
</pre> <ul> <li><a href="/pt/XUL/textbox" title="pt/XUL/textbox">Textbox Reference</a></li> </ul> </td> <td> </td> </tr> <tr> <td><strong>&lt;textbox type="number"&gt;</strong> <p><strong><span class="highlightred"><small>New in Mozilla 1.9 / Firefox 3</small></span></strong></p> <p>A textbox for entering numbers. Two arrow buttons are displayed for cycling through values.</p> <pre>
&lt;textbox type="number" min="1" max="20"/&gt;
</pre> <ul> <li><a href="/pt/XUL/textbox" title="pt/XUL/textbox">Textbox Reference</a></li> </ul> </td> <td><img alt="Image:Controlguide-textbox-number.png" fileid="0" src="File:pt/Media_Gallery/Controlguide-textbox-number.png"></td> </tr> <tr> <td><strong>&lt;textbox type="password"&gt;</strong> <p>A textbox that hides the characters typed, used for entering passwords.</p> <pre>
&lt;textbox type="password"/&gt;
</pre> <ul> <li><a href="/pt/XUL/textbox" title="pt/XUL/textbox">Textbox Reference</a></li> </ul> </td> <td><img alt="Image:Controlguide-textbox-password.png" fileid="0" src="File:pt/Media_Gallery/Controlguide-textbox-password.png"></td> </tr> <tr> <td><strong>&lt;timepicker&gt;</strong> <p><strong><span class="highlightred"><small>New in Mozilla 1.9 / Firefox 3</small></span></strong></p> <p>A timepicker displays a set of textboxes for entering a time.</p> <pre>
&lt;timepicker value="12:05"/&gt;
</pre> <ul> <li><a href="/pt/XUL/timepicker" title="pt/XUL/timepicker">Timepicker Reference</a></li> </ul> </td> <td><img alt="Image:Controlguide-timepicker.png" fileid="0" src="File:pt/Media_Gallery/Controlguide-timepicker.png"></td> </tr> <tr> <td><strong>&lt;toolbarbutton&gt;</strong> <p>A button that is displayed on a toolbar.</p> <pre>
&lt;toolbarbutton label="Reload"/&gt;
</pre> <ul> <li><a href="/pt/XUL_Tutorial/Toolbars" title="pt/XUL_Tutorial/Toolbars">More information about the toolbarbutton element</a>.</li> <li><a href="/pt/XUL/toolbarbutton" title="pt/XUL/toolbarbutton">Toolbarbutton Reference</a></li> <li>Related Elements: {{ XULElem("toolbar") }}</li> </ul> </td> <td><img alt="Image:Controlguide-toolbarbutton.png" fileid="0" src="File:pt/Media_Gallery/Controlguide-toolbarbutton.png"></td> </tr> <tr> <td><strong>&lt;toolbarbutton type="menu"&gt;</strong> <p>A button that is displayed on a toolbar with a drop down menu attached to it.</p> <pre>
&lt;toolbarbutton type="menu" label="Show"&gt;
  &lt;menupopup&gt;
    &lt;menuitem label="Toolbars"/&gt;
    &lt;menuitem label="Status Bar"/&gt;
  &lt;/menupopup&gt;
&lt;/toolbarbutton&gt;
</pre> <ul> <li><a href="/pt/XUL_Tutorial/Toolbars" title="pt/XUL_Tutorial/Toolbars">More information about this type of menu toolbarbutton element</a>.</li> <li><a href="/pt/XUL/toolbarbutton" title="pt/XUL/toolbarbutton">Toolbarbutton Reference</a></li> <li>Related Elements: {{ XULElem("menupopup") }} {{ XULElem("menuitem") }} {{ XULElem("toolbar") }}</li> </ul> </td> <td> </td> </tr> <tr> <td><strong>&lt;toolbarbutton type="menu-button"&gt;</strong> <p>A button on a toolbar that that has a separate arrow button with a menu attached to it. Unlike with the 'menu' type, a separate action may be performed when the main part of the button is pressed.</p> <pre>
&lt;toolbarbutton type="menu-button" label="Open"&gt;
  &lt;menupopup&gt;
    &lt;menuitem label="Open Changed Files"/&gt;
    &lt;menuitem label="Open All"/&gt;
  &lt;/menupopup&gt;
&lt;/toolbarbutton&gt;
</pre> <ul> <li><a href="/pt/XUL_Tutorial/Toolbars" title="pt/XUL_Tutorial/Toolbars">More information about this type of menu toolbarbutton element</a>.</li> <li><a href="/pt/XUL/toolbarbutton" title="pt/XUL/toolbarbutton">Toolbarbutton Reference</a></li> <li>Related Elements: {{ XULElem("menupopup") }} {{ XULElem("menuitem") }} {{ XULElem("toolbar") }}</li> </ul> </td> <td> </td> </tr> <tr> <td><strong>&lt;tree&gt;</strong> <p>A tree displays a hierarchy of items in multiple columns.</p> <pre>
&lt;tree&gt;
  &lt;treecols&gt;
    &lt;treecol label="Name" flex="1"/&gt;
    &lt;treecol label="Size" flex="1"/&gt;
  &lt;/treecols&gt;
  &lt;treechildren&gt;
    &lt;treeitem&gt;
      &lt;treerow&gt;
        &lt;treecell label="Popcorn"/&gt;
        &lt;treecell label="Large"/&gt;
      &lt;/treerow&gt;
    &lt;/treeitem&gt;
    &lt;treeitem&gt;
      &lt;treerow&gt;
        &lt;treecell label="Root Beer"/&gt;
        &lt;treecell label="Small"/&gt;
      &lt;/treerow&gt;
    &lt;/treeitem&gt;
  &lt;/treechildren&gt;
&lt;/tree&gt;
</pre> <ul> <li><a href="/pt/XUL_Tutorial/Trees" title="pt/XUL_Tutorial/Trees">More information about the tree element</a>.</li> <li><a href="/pt/XUL/tree" title="pt/XUL/tree">Tree Reference</a></li> <li>Related Elements: {{ XULElem("treecell") }} {{ XULElem("treechildren") }} {{ XULElem("treecol") }} {{ XULElem("treecols") }} {{ XULElem("treeitem") }} {{ XULElem("treerow") }}</li> </ul> </td> <td><img alt="Image:Controlguide-tree.png" fileid="0" src="File:pt/Media_Gallery/Controlguide-tree.png"></td> </tr> </tbody>
</table>
<p><span class="comment">Categorias</span></p>
<p><span class="comment">Interwiki Language Links</span></p>
<p>{{ languages( { "en": "en/XUL_controls" } ) }}</p>
Reverter para esta revisão