Más características de los botones

Añadiendo una imagen

Usted puede agregar una imagen a un botón especificando una URL en el atributo imagen. La imagen se carga desde la URL, la cual puede ser relativa o absoluta, entonces la imagen se muestra sobre el botón.

El botón de arriba tendrá label y imagen 'happy.png'. La imagen aparecerá a la izquierda de la etiqueta. Usted puede cambiar la posición usando otros dos atributos. Esto se explicará en un momento.

Ejemplo 1: Código Ver en funcionamiento

<button label="Ayuda" image="happy.png"/>

Botón con imagen CSS

Another way to specify the image is by using the CSS list-style-image style property on the button. This is designed to allow the 'skin' (in this case, the appearance of the image) to be changed without changing the XUL file. An example is shown below.

Ejemplo 2: Código Ver en funcionamiento

<button id="find-button"
  label="Busca" style="list-style-image: url('happy.png')"/>

In this case, the image 'happy.png' is displayed on the button. The estilo attribute functions similar to its HTML counterpart. In general, it can be used on all XUL elements. Note that you really should put the style declarations in a separate style sheet.

Posicionando las imágenes

By default, the image on a button will appear to the left of the text label. There are two attributes that can be used to control this position.

The dirección attribute controls the direction of the image and text. By setting this attribute to the value reverse, the image will be placed on the right side of the text. By using the value normal, or leaving the attribute out entirely, the image will be placed on the left side of the text.

The orientación attribute can be used to place the image above or below the text. The default value is horizontal which is used to place the image on the left or right. You can also use the value vertical to place the image above or below. In this case, the dir attribute controls the placement above or below. The same values are used, where normal means place the image above the text, and reverse means place the image below the text.

Ejemplo 3: Código Ver en funcionamiento

<button label="Left" image="happy.png"/>
<button label="Right" image="happy.png" dir="reverse"/>
<button label="Above" image="happy.png" orient="vertical"/>
<button label="Below" image="happy.png" orient="vertical" dir="reverse"/>

The example here shows all four types of alignment of buttons. Note that the two attributes are not specified when the default value can be used.

Botones con contenido extra

Buttons may have arbitrary markup contained inside them, and it will be rendered inside the button. You probably wouldn't use this very often, but you might use it when creating custom elements.

For example, the following will create a button where two of the words are red:

Ejemplo 4: Código Ver en funcionamiento

<button>
  <description value="This is a"/>
  <description value="rather strange" style="color: red;"/>
  <description value="button"/>
</button>

Any XUL element may be placed inside the botón. HTML elements will be ignored, so you need to wrap them inside a descripción element. If you specify the label attribute on the button, it will override any content placed inside the button.

Botón con menú emergente

You can place a menupopup inside the button to cause a menu to drop down when the button is pressed, much like the menulist. However, in this case you must set the type attribute to the value menu.

Ejemplo 5:

Código Ver en funcionamiento

<button type="menu" label="Device">
  <menupopup>
    <menuitem label="Impresora"/>
    <menuitem label="Ratón"/>
    <menuitem label="Teclado"/>
  </menupopup>
</button>

In this example, the user may click the button to pop up a menu containing three items. Note that selecting one of these menu items doesn't change the label on the button, unlike a menulist. This type of button is intended to be used like a menu, with scripts attached to each item to perform a task. We'll see more on menus later.

You can also set the type attribute to the value menu-button. This also creates a button with a menu, but the appearance will be different. The image to the right shows the difference. The left one is a 'menu' and the second one is a 'menu-button'. It has an arrow indicating the presence of a menu. For the 'menu', the user may click anywhere on the button to show the menu. For the 'menu-button', the user must click the arrow to show the menu.

Seguimos con como los elementos XUL son colocados en una ventana.