mozilla
Los resultados de tu búsqueda

    Más funciones de menú

     

    En esta sección, veremos cómo crear submenús y menús con marcas de verificación o checks.

    Crear submenús

    Puedes crear submenús dentro de otros menús (menús jerarquizados ) usando los elementos existentes. Recuerda que puedes poner cualquier elemento dentro de un menupopup. Ya hemos visto cómo colocar menuitems y menuseparators en menupopups. Sin embargo , puedes crear submenús simplemente colocando el elemento de menu dentro del elemento del menupopup . Esto funciona porque el elemento del menú es válido aún cuando no esté colocado directamente en la barra de menú. El ejemplo de abajo crea un submenú simple dentro del menú de File.

    Ejemplo 1: Código Ver en funcionamiento

    nested-menu.jpg
    <toolbox flex="1">
      <menubar id="sample-menubar">
        <menu id="file-menu" label="Archivo">
          <menupopup id="file-popup">
            <menu id="new-menu" label="Nuevo">
              <menupopup id="new-popup">
                <menuitem label="Ventana"/>
                <menuitem label="Mensage"/>
              </menupopup>
            </menu>
            <menuitem label="Abrir"/>
            <menuitem label="Guardar"/>
            <menuseparator/>
            <menuitem label="Salir"/>
          </menupopup>
        </menu>
      </menubar>
    </toolbox>
    

    Adición de un menú a nuestro ejemplo con el Buscador de archivos

    Agreguemos un menú al dialogo de búsqueda de archivos. Agregaremos solo unos pocos comandos simples a un menú File y un menú Edit. Este es similar al ejemplo de arriba.

    <toolbox>
    
     <menubar id="findfiles-menubar">
    <menu id="file-menu" label="Archivo" accesskey="f">
    <menupopup id="file-popup">
    <menuitem label="Abrir la búsqueda..." accesskey="o"/>
    <menuitem label="Guardar la búsqueda..." accesskey="s"/>
    <menuseparator/>
    <menuitem label="Cerrar" accesskey="c"/>
    </menupopup>
    </menu>
    <menu id="edit-menu" label="Editar" accesskey="e">
    <menupopup id="edit-popup">
    <menuitem label="Cortar" accesskey="t"/>
    <menuitem label="Copiar" accesskey="c"/>
    <menuitem label="Pegar" accesskey="p" disabled="true"/>
    </menupopup>
    </menu>
    </menubar>
    <toolbar id="findfiles-toolbar>
    fnd-dlg-sample.jpg

    Aquí hemos agregado dos menús con varios comandos en ellos. Observa cómo la barra de menús fue agregada dentro de la caja. Los tres puntos después de Open y Save son la forma habitual en la que se indica al usuario que se abrirá un dialogo cuando seleccione el comando. Se han agregado claves de acceso para cada menú y elemento de menú. Verás en la imagen que esta letra ha sido subrayada en la etiqueta del menú. Además, el comando Pegar (Paste) ha sido deshabilitado. Asumiremos que no hay nada que pegar.

     Ejemplo de Encontrar archivos  : Código Ver en funcionamiento

    Añadir marcas de verificación (checkmarks) a los menús

    Muchas aplicaciones tienen elementos de menú que tienen marcas de verificación o checks. Por ejemplo, una característica que este activada tiene una marca de verificación o check al lado del comando y una característica que está deshabilitada no lo tiene. Cuando el usuario selecciona el menú, cambia el estado de la marca o check (habilitado/deshabilitado). Puedes además agregar botones redondos en los elementos del menú.

    Las marcas de verificación o checks se crean de manera similar a los elementos checkbox y radio . Esto implica el uso de dos atributos: type para indicar el tipo de  marca o check y name para agrupar comandos. El ejemplo de abajo crea un menú con una marca de verificación.

    Ejemplo 2: Código Ver en funcionamiento

    <toolbox>
      <menubar id="options-menubar">
        <menu id="options_menu" label="Opciones">
          <menupopup>
            <menuitem id="backups" label="Hacer copias de seguridad" type="checkbox"/>
            <menuitem id="backups" label="Enviar un email al administrador" type="checkbox" checked="true"/>
          </menupopup>
        </menu>
      </menubar>
    </toolbox>
    

    El atributo type se ha agregado con el fin poder marcar o desmarcar un elemento del menú. Al establecer su valor a checkbox , el elemento del menú puede marcarse o desmarcarse seleccionando dicho elemento.

    Menú con botones circulares

    Además de las marcas estándares, puedes crear checks con estilo circular cambiando el valor de type a el valor de radio. Un botón circular si usa si se desea agrupar varios elementos del menús pero se puede seleccionar solo uno a la vez. Un ejemplo puede ser a menú de Fuente (font) donde únicamente puede seleccionarse una fuente a la vez. Cuando se selecciona otro elemento, el seleccionado previamente queda deshabilitado.

    Con el fin de agrupar un conjunto de elementos del menú, tienes que poner un atributo name a cada uno. Establece el valor para la misma cadena. El ejemplo siguiente lo muestra:

    Ejemplo 3: Código Ver en funcionamiento

    <toolbox>
      <menubar id="planets-menubar">
        <menu id="planet-menu" label="Planetas">
          <menupopup>
            <menuitem id="júpiter" label="Júpiter" type="radio" name="ringed"/>
            <menuitem id="saturno" label="Saturno" type="radio" name="ringed" checked="true"/>
            <menuitem id="uranus" label="Uranus" type="radio" name="ringed"/>
            <menuseparator/>
            <menuitem id="tierra" label="Tierra" type="radio" name="inhabited" checked="true"/>
            <menuitem id="luna" label="Luna" type="radio" name="inhabited"/>
          </menupopup>
        </menu>
      </menubar>
    </toolbox>
    

    Si pruebas a hacer este ejemplo, encontrarás que de los tres primeros elementos del menú, solamente se puede seleccionar uno. Se agrupan juntos porque todos tienen el mismo nombre. El último elemento del menú es Earth, aunque es un botón circular, no es parte de este grupo porque tiene un nombre diferente.

    Desde luego, los elementos agrupados deben estar dentro del mismo menú. No se deben ubicar cerca unos de otros en el menú, además no tiene mucho sentido que lo estén.

    Seguimos con la creación de menús emergentes.

    Etiquetas y colaboradores del documento

    Contributors to this page: ibnkhaldun, M3n3chm0, Nathymig, inma_610, GUALY GAETE, Mgjbot
    Última actualización por: inma_610,