jorgesumle
/
referencia-html


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
							.. 4.11

======================
Elementos interactivos
======================

El elemento ``details``
=======================

El elemento de ``<details>`` representa un widget de revelación desde el cual el
usuario puede obtener información adicional o controles.

Dentro de ``<details>`` lo primero que tenemos que poner es el elemento
``<summary>`` (resumen de los detalles) opcionalmente.

El elemento de ``<details>`` no es apropiado para las notas a pie de página.

El resto del contenido del elemento representa la información adicional o
los controles.

Si el atributo booleano ``open`` está presente, indica que tanto el resumen
como la información adicional se mostrarán al usuario. Si el atributo está
ausente, sólo se mostrará el resumen.

El ejemplo siguiente muestra el elemento de ``<details>`` que se utiliza para
ocultar detalles técnicos en un informe de progreso.

.. code-block:: html

     <section class="ventana progreso">
       <h1>Copiando 'Realmente logrando sus sueños infantiles'</h1>
       <details>
       <summary>Copiando... <progress max="375505392" value="97543282"></progress> 25%</summary>
       <dl>
         <dt>Rango de transferencia:</dt> <dd>452KB/s</dd>
         <dt>Nombre de archivo local:</dt> <dd>/home/rpausch/raycd.m4v</dd>
         <dt>Nombre de archivo remoto:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
         <dt>Duracion:</dt> <dd>01:16:27</dd>
         <dt>Color del perfil:</dt> <dd>SD (6-1-6)</dd>
         <dt>Dimensiones:</dt> <dd>320×240</dd>
       </dl>
       </details>
     </section>


A continuación se muestra cómo se puede utilizar un elemento ``<details>``
para ocultar algunos controles de forma predeterminada:

.. code-block:: html

     <details>
       <summary><label for=fn>Nombre &amp; Extensión:</label></summary>
       <p><input type=text id=fn name=fn value="Pilar Magazine.pdf">
       <p><label><input type=checkbox name=ext checked>Hide extension</label>
     </details>

Uno podría usar esto en conjunción con otros ``<details>`` en una lista para permitir
al usuario colapsar un conjunto de campos hasta un pequeño conjunto de encabezados,
con la capacidad de abrir cada uno.

.. image:: imagenes/details1.png

.. image:: imagenes/details2.png

En estos ejemplos, el elemento ``<summary>`` resume realmente lo que los
controles pueden cambiar, y no los valores reales.

Debido a que el atributo ``open`` se agrega y se elimina automáticamente cuando
el usuario interactúa con el control, puede utilizarse en CSS para diseñar el
elemento de forma diferente en función de su estado. Aquí se utiliza una hoja
de estilo para animar el color del resumen cuando se abre o se cierra el elemento:

.. code-block:: html

     <head>
       <style>
         details > summary { transition: color 1s; color: black; }
         details[open] > summary { color: red; }
       </style>
     </head>
     <body>
       <details>
         <summary>Automated Status: Operational</summary>
         <p>Velocity: 12m/s</p>
         <p>Direction: North</p>
       </details>
     </body>

El elemento ``summary``
=======================

El elemento de ``<summary>`` representa un resumen, un título o una leyenda
del elemento ``<details>``, si lo hay. Este elemento suele ser el primer hijo
de un elemento ``<details>``.

El elemento ``menu``
====================

El elemento de ``<menu>`` representa un grupo de comandos que el usuario
puede realizar o activar. Esto incluye tanto listas de menús como
menús contextuales, como los que pueden aparecer debajo de un botón
después de que se ha pulsado.

Se puede utilizar con los siguientes atributos:

- ``label``. El nombre del menú.

- ``type``. Indica el tipo de menú. Puede tener dos valores:

  - ``context``. Indica un estado de *menu popup* que representa un grupo
    de comandos activados a partir de otro elemento.

  - ``toolbar``. Indica el estado de barra de herramientas (*toolbar*) que
    consiste una serie de comandos para la interacción con el usuario.

El elemento ``menuitem``
========================

El elemento ``<menuitem>`` representa un comando que el usuario puede invocar
desde un menú emergente (un menú contextual).

Puede utilizarse con los siguientes atributos:

- ``type``. El tipo de comando. Hay tres:
    - ``Command``. El elemento representa un comando normal con una acción asociada.
    - ``Checkbox``. El elemento representa un estado o una opción que se puede alternar.
    - ``Radio``. El elemento representa una selección de un elemento de una lista de elementos.
- ``label``. El nombre del comando, como se muestra al usuario.
- ``icon``. El icono del comando.
- ``disable``. Indica si el comando o control está deshabilitado.
- ``checked``. Comprueba si el comando o control está seleccionado.
- ``radiogroup``. Nombre o grupo de comandos que tratar como un grupo
  de botones de opción (*radio button*).
- ``default``. Indica que es el comando por defecto.

.. code-block:: html

     <div contextmenu="popup-menu">
       Right-click to see the adjusted context menu
     </div>

     <menu type="context" id="popup-menu">
       <menuitem type="checkbox" onclick="toggleOption()"
         checked="true">Checkbox</menuitem>
       <menuitem type="command" label="Command" icon="icon.png"
         onclick="doSomething()">Checkbox</menuitem>
       <menuitem type="radio" name="group1" onclick="option()"
         checked="true">Radio button 1</menuitem>
       <menuitem type="radio" name="group1"
         onclick="option()">Radio button 2</menuitem>
     </menu>