Elemento menuitem

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento menuitem representa a un comando en un menu. Los menús han sido diseñados para incrementar la interactividad en documentos de estilo aplicación, permitiendo a los autores proveer comandos que los usuarios pueden ejecutar al hacer clic en sus etiquetas. Estos menús son normalmente mostrados por encima de la aplicación o a petición del usuario (como por ejemplo, al hacer clic derecho sobre un elemento).

Un menuitem puede ser declarado para definir un comando, al establecer su naturaleza o comportamiento con los atributos type, label, icon, disabled, checked, radiogroup y default. En tal caso, es requerido que el elemento presente una etiqueta no vacía, la cual puede ser definida a través del atributo label a mediante su contenido.

Por otro lado, también puede ser usado para hacer referencia a otro comando existente, omitiendo todos los atributos excepto command. En el último caso, el atributo command debería coincidir con el atributo id del elemento menuitem al que hacer referencia.

Este mecanismo permite a los autores crear un comando y luego instanciarlo en diferentes ubicaciones. Los cambios realizados al comando maestro son inmediatamente reflejados en todos los comandos que hacen referencia a él.

Cuando un elemento menuitem es declarado para definir un comando, éste puede ser de tres tipos diferentes, de acuerdo al valor de su atributo type. Los valores que éste puede tomar son (insensibles a mayúsculas/minúsculas):

  • command: el elemento representa un comando con una acción asociada. Este es el valor por defecto.
  • checkbox: el elemento representa un valor u opción que puede ser alternado (encendido/apagado). Con esta configuración el comando se comporta como una casilla de verificación.
  • radio: el elemento representa una opción que forma parte de un grupo de opciones, compuesto por uno o más comandos que comparten el mismo valor en el atributo radiogroup. Con esta configuración el comando se comporta como un botón de opción

El texto que representará al comando en el menu es provisto por el atributo label. Opcionalmente, puede proveerse un ícono (declarando su ubicación en el atributo icon) que, en la mayoría de los casos, será mostrado junto a la etiqueta del comando.

Cuando se encuentra declarado en este elemento, el atributo title tiene un significado especial, ya que es usado para describir el propósito del comando.

Hasta el 27/03/2015, el soporte provisto por los navegadores para el elemento menu es casi inexistente. Los autores pueden tener que recurrir a programas para lograr el mismo efecto consistentemente, hasta que el soporte crezca.

Ejemplos

En nuestro primer ejemplo, crearemos un menu contextual para un párrafo (p). Este menú será mostrado por los navegadores que lo soporten cuando el usuario haga clic derecho sobre el párrafo. Las acciones ejecutadas por cada menuitem serán llevadas a cabo por un programa del lado cliente llamado en el atributo onclick.

<p id="parrafo1" contextmenu="menucontextual1">Un menú contextual a medida debería ser mostrado en los navegadores que lo soportan, cuando el usuario haga un clic derecho sobre este párrafo, permitiendo la selección del color de fondo.</p>
<menu id="menucontextual1" type="context">
  <menuitem label="Fondo rojo" onclick="menuCambiarColorA(1, 'rojo')"></menuitem>
  <menuitem label="Fondo verde" onclick="menuCambiarColorA(1, 'verde')"></menuitem>
  <menuitem label="Fondo azul" onclick="menuCambiarColorA(1, 'azul')"></menuitem>
</menu>

Un menú contextual a medida debería ser mostrado en los navegadores que lo soportan, cuando el usuario haga un clic derecho sobre este párrafo, permitiendo la selección del color de fondo.

Ahora agregaremos íconos a los comandos definidos en este menu personalizado. Para lograrlo, el URI de la imagen que actuará de ícono debe ser especificado en el atributo icon del menuitem.

Las funciones declaradas en el siguiente ejemplo no están diseñadas para funcionar. Este ejemplo apunta únicamente a probar la funcionalidad provista por los navegadores para menús.

<p contextmenu="menucontextual2">La Primera Guerra Mundial, también conocida como Gran Guerra, fue una guerra desarrollada principalmente en Europa, que dio comienzo el 28 de julio de 1914 y finalizó el 11 de noviembre de 1918, cuando Alemania pidió el armisticio y más tarde el 28 de junio de 1919, los países en guerra firmaron el Tratado de Versalles.</p>
<menu id="menucontextual2" type="context">
  <menuitem label="Cortar" icon="../../../images/cut-icon.png" onclick="cortar()"></menuitem>
  <menuitem label="Copiar" icon="../../../images/copy-icon.png" onclick="copiar()"></menuitem>
  <menuitem label="Pegar" icon="../../../images/paste-icon.png" onclick="pegar()"></menuitem>
</menu>

La Primera Guerra Mundial, también conocida como Gran Guerra, fue una guerra desarrollada principalmente en Europa, que dio comienzo el 28 de julio de 1914 y finalizó el 11 de noviembre de 1918, cuando Alemania pidió el armisticio y más tarde el 28 de junio de 1919, los países en guerra firmaron el Tratado de Versalles.

Por último, jugaremos un poco con los atributos de los elementos menuitem para proveer opciones que se comportan como casillas de verificación y botones de opción. Para lograr esto, declararemos al primer menuitem con el valor "checkbox" en su atributo type, mientras que los últimos tres comandos tendrán el valor "radio" en su atributo type y compartirán el mismo valor en el atributo radiogroup.

Las funciones declaradas en el siguiente ejemplo no están diseñadas para funcionar. Este ejemplo apunta únicamente a probar la funcionalidad provista por los navegadores para menús.

<p contextmenu="menucontextual3">La Segunda Guerra Mundial fue un conflicto militar global que se desarrolló entre 1939 y 1945. En él se vieron implicadas la mayor parte de las naciones del mundo, incluidas todas las grandes potencias, agrupadas en dos alianzas militares enfrentadas: los Aliados de la Segunda Guerra Mundial y las Potencias del Eje.</p>
<menu id="menucontextual3" type="context">
  <menuitem type="checkbox" label="Detectar método de entrada"></menuitem>
  <hr>
  <menuitem type="radio" label="Entrada lenta" radiogroup="velocidad"></menuitem>
  <menuitem type="radio" label="Entrada media" radiogroup="velocidad"></menuitem>
  <menuitem type="radio" label="Entrada rápida" radiogroup="velocidad"></menuitem>
</menu>

La Segunda Guerra Mundial fue un conflicto militar global que se desarrolló entre 1939 y 1945. En él se vieron implicadas la mayor parte de las naciones del mundo, incluidas todas las grandes potencias, agrupadas en dos alianzas militares enfrentadas: los Aliados de la Segunda Guerra Mundial y las Potencias del Eje.


Atributos

Atributos específicos

type

Uno de tres valores predefinidos que determina el comportamiento y/o propósito del comando. Los tres valores posibles (insensibles a mayúsculas/minúsculas) son:

  • command: el elemento representa un comando con una acción asociada. Este es el valor por defecto.
  • checkbox: el elemento representa un valor u opción que puede ser alternado (encendido/apagado). Con esta configuración el comando se comporta como una casilla de verificación.
  • radio: el elemento representa una opción que forma parte de un grupo de opciones, compuesto por uno o más comandos que comparten el mismo valor en el atributo radiogroup. Con esta configuración el comando se comporta como un botón de opción

Ejemplo

<menu id="menucontextualrevision" type="context">
  <menuitem type="checkbox" label="Revisar conformidad"></menuitem>
  <hr>
  <menuitem type="radio" label="HTML 4.01" radiogroup="estandar"></menuitem>
  <menuitem type="radio" label="XHTML 1.0" radiogroup="estandar"></menuitem>
  <menuitem type="radio" label="HTML5" radiogroup="estandar"></menuitem>
</menu>

label

Una línea de texto para ser mostrada por el menu como etiqueta de este comando.

Las funciones del siguiente ejemplo ("revisarErrores" y "guardarBorrador") no están diseñadas para funcionar. Este ejemplo apunta únicamente a mostrar cómo los navegadores muestran etiquetas para los comandos.

Ejemplo

<p contextmenu="menucontextual4">El ábaco es un instrumento que sirve para efectuar operaciones aritméticas sencillas (sumas, restas y multiplicaciones). Consiste en un cuadro de madera con barras paralelas por las que corren bolas movibles, útil también para enseñar estos cálculos simples.</p>
<menu id="menucontextual4" type="context">
  <menuitem label="Revisar errores" onclick="revisarErrores()"></menuitem>
  <menuitem label="Guardar borrador" onclick="guardarBorrador()"></menuitem>
</menu>

El ábaco es un instrumento que sirve para efectuar operaciones aritméticas sencillas (sumas, restas y multiplicaciones). Consiste en un cuadro de madera con barras paralelas por las que corren bolas movibles, útil también para enseñar estos cálculos simples.

icon

El URI de una imagen que representará visualmente el propósito del comando. Esta imagen será normalmente mostrada junto a la etiqueta del comando (atributo label).

La función del siguiente ejemplo no está diseñada para funcionar. Este ejemplo apunta únicamente a mostrar cómo los navegadores muestran íconos para los comandos.

Ejemplo

<p contextmenu="menucontextual5">La computación cuántica es un paradigma de computación distinto al de la computación clásica. Se basa en el uso de qubits en lugar de bits, y da lugar a nuevas puertas lógicas que hacen posible nuevos algoritmos.</p>
<menu id="menucontextual5" type="context">
  <menuitem label="Corrección automática" icon="../../../images/autofix-icon.png" onclick="correccionAutomatica()"></menuitem>
</menu>

La computación cuántica es un paradigma de computación distinto al de la computación clásica. Se basa en el uso de qubits en lugar de bits, y da lugar a nuevas puertas lógicas que hacen posible nuevos algoritmos.

disabled

Un valor booleano que indica si el comando está deshabilitado o no. Si el atributo toma el valor "disabled" o la cadena vacía (""), o si simplemente está presente, el comando estará deshabilitado.

Los comandos deshabilitados son representados en color gris (si son visibles) y los usuarios son impedidos de interactuar con ellos de cualquier forma.

Ejemplo

<p contextmenu="menucontextual6">Wilhelm Conrad Röntgen1 fue un físico alemán, de la Universidad de Würzburg, que el 8 de noviembre de 1895 produjo radiación electromagnética en las longitudes de onda correspondiente a los actualmente llamados rayos X.</p>
<menu id="menucontextual6" type="context">
  <menuitem label="Borrar todo" onclick="borrarTodo()" disabled></menuitem>
</menu>

Wilhelm Conrad Röntgen1 fue un físico alemán, de la Universidad de Würzburg, que el 8 de noviembre de 1895 produjo radiación electromagnética en las longitudes de onda correspondiente a los actualmente llamados rayos X.

checked

Un valor booleano que indica si este comando de tipo "checkbox" o "radio" estará inicialmente seleccionado o no. Si este atributo toma el valor "checked" o la cadena vacía (""), o si está simplemente presente, el comando estará inicialmente seleccionado.

Ejemplo

<p contextmenu="menucontextual7">David fue un rey israelita, sucesor del rey Saúl y el segundo monarca del Reino de Israel, logrando unificar su territorio e incluso expandirlo, de modo de comprender las ciudades de Jerusalén y Samaria, Petra, Zabah y Damasco.</p>
<menu id="menucontextual7" type="context">
  <menuitem type="checkbox" label="Actualizar automáticamente" checked></menuitem>
  <menuitem type="checkbox" label="Asistente de escritura"></menuitem>
</menu>

David fue un rey israelita, sucesor del rey Saúl y el segundo monarca del Reino de Israel, logrando unificar su territorio e incluso expandirlo, de modo de comprender las ciudades de Jerusalén y Samaria, Petra, Zabah y Damasco.

radiogroup

Un identificador que provee un nombre para el grupo al que este comando de tipo "radio" pertenece. Todos los comandos con el mismo valor en este atributo serán parte del mismo grupo de opciones.

En un grupo de comandos solo uno de los comandos puede ser seleccionado a la vez. Al seleccionar un comando, todos los demás comandos en el grupo serán deseleccionados.

Ejemplo

<p contextmenu="menucontextual8">The Beatles fue una banda de rock inglesa activa durante la década de 1960, y reconocida como la más exitosa comercialmente y críticamente aclamada en la historia de la música popular.</p>
<menu id="menucontextual8" type="context">
  <menuitem type ="radio" label="Bajo contraste" radiogroup="contraste"></menuitem>
  <menuitem type ="radio" label="Alto contraste" radiogroup="contraste"></menuitem>
</menu>

The Beatles fue una banda de rock inglesa activa durante la década de 1960, y reconocida como la más exitosa comercialmente y críticamente aclamada en la historia de la música popular.

default

Un valor booleano que indica si este comando es el predeterminado o no. Si este atributo tiene el valor "default" o la cadena vacía (""), o si está simplemente presente, el comando será la opción predeterminada.

Los comandos predeterminados son ejecutados cuando el usuario activa directamente la etiqueta del menu en lugar de desplegar su lista de comandos.

Las funciones del siguiente ejemplo ("guardarSobreescribir" y "guardarNuevoNombre") no están diseñadas para funcionar. Este ejemplo apunta únicamente a mostrar la funcionalidad provista por los navegadores para menús.

Ejemplo

<menu id="menucontextualguardado" type="context">
  <menu label="Guardar">
    <menuitem label="Sobreescribir" onclick="guardarSobreescribir()" default></menuitem>
    <menuitem label="Usar un nombre nuevo" onclick="guardarNuevoNombre()"></menuitem>
  </menu>
</menu>

command

Un identificador que coincide con el contenido del atributo id del comando al que este elemento hace referencia. Este atributo establece al elemento como una referencia a otro menuitem que ha sido declarado para definir un comando.

Este mecanismo permite a los autores crear un comando y luego instanciarlo en diferentes ubicaciones. Los cambios realizados al comando maestro son inmediatamente reflejados en todos los comandos que hacen referencia a él.

Las funciones del siguiente ejemplo ("nuevo", "guardar", "imprimir" y "cerrar") no están diseñadas para funcionar. Este ejemplo apunta únicamente a mostrar la funcionalidad provista por los navegadores para menús.

Ejemplo

<p contextmenu="menurapido">John Ronald Reuel Tolkien, a menudo citado como J. R. R. Tolkien o JRRT, fue un escritor, poeta, filólogo, lingüista y profesor universitario británico, conocido principalmente por ser el autor de las novelas clásicas de alta fantasía El hobbit y El Señor de los Anillos.</p>
<menu id="menurapido" type="context">
  <menuitem command="menunuevo"></menuitem>
  <menuitem command="menucerrar"></menuitem>
</menu>
<menu id="menuextendido" type="context">
  <menuitem id="menunuevo" label="Nuevo" onclick="nuevo()"></menuitem>
  <menuitem id="menuguardar" label="Guardar" onclick="guardar()"></menuitem>
  <menuitem id="menuimprimir" label="Imprimir" onclick="imprimir()"></menuitem>
  <menuitem id="menucerrar" label="Cerrar" onclick="cerrar()"></menuitem>
</menu>

John Ronald Reuel Tolkien, a menudo citado como J. R. R. Tolkien o JRRT, fue un escritor, poeta, filólogo, lingüista y profesor universitario británico, conocido principalmente por ser el autor de las novelas clásicas de alta fantasía El hobbit y El Señor de los Anillos.

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.