Latest web development tutorials

jQuery UI API - menú de la parte (Widget Menú)

categoría

Los widgets (widgets)

uso

Descripción: Con la interacción con el ratón y el teclado para la navegación se puede menú temático.

Nueva versión: 1.9

Menú se puede crear con cualquier etiquetas válidas, siempre y cuando el elemento tiene una estricta relación padre / hijo y cada entrada tiene un ancla. El elemento más común es una lista desordenada ( <ul> ): 

<Ul id = "Menú">
  <Li> <a href="#"> artículo 1 </a> </ li>
  <Li> <a href="#"> artículo 2 </a> </ li>
  <Li> <a href="#"> artículo 3 </a>
    <Ul>
      <Li> <a href="#"> artículo 3-1 </a> </ li>
      <Li> <a href="#"> artículo 3-2 </a> </ li>
      <Li> <a href="#"> artículo 3-3 </a> </ li>
      <Li> <a href="#"> artículo 3-4 </a> </ li>
      <Li> <a href="#"> artículo 3-5 </a> </ li>
    </ Ul>
  </ Li>
  <Li> <a href="#"> artículo 4 </a> </ li>
  <Li> <a href="#"> artículo 5 </a> </ li>
</ Ul>

Si no se utiliza un <ul> / <li> estructura de menús y elementos de menú utilizando los mismos elementos, utilizar menus opción para distinguir entre los dos elementos, como menus: "div.menuElement" .

Mediante la adición al elemento ui-state-disabled , clase para desactivar cualquier elemento del menú.

icono

Para agregar iconos al menú, incluir un icono en la etiqueta: 

<Ul id = "Menú">
  <Li> <a href="#"> <span class = "ui-ui-icono icono de disco"> </ span> Guardar </a> </ li>
</ Ul>

Menu (Menú) añade automáticamente el relleno necesario ninguna entrada icono.

separador

elementos de separación se pueden crear mediante la inclusión de elementos de menú no ligados, elementos de menú sólo espacios / guiones: 

<Ul id = "Menú">
  <Li> <a href="#"> artículo 1 </a> </ li>
  <Li> - </ li>
  <Li> <a href="#"> artículo 2 </a> </ li>
</ Ul>

interacción con el teclado

  • ENTER / ESPACIO: llamar a la opción de menú de acción que tenga el foco, puede abrir un submenú.
  • UP: mover a las enseñanzas de un elemento de menú.
  • ABAJO: pasar a la siguiente opción de menú enseñanzas.
  • DERECHA: Si está disponible, a continuación, abrir el submenú.
  • IZQUIERDA: Cierre el sub-menú actual, mover el foco al elemento del menú principal. Si el foco no está en el submenú, no se hace nada.
  • ESCAPE: Cierra el sub-menú actual, mover el foco al elemento del menú principal. Si el foco no está en el submenú, no se hace nada.

Introducir una letra, mueva el cursor a la primera entrada que comience con esa letra. Repetir el mismo ciclo carácter voluntad a través de las entradas coincidentes. Hubo un tiempo en que se introducen más caracteres coinciden con el carácter introducido.

Deshabilitar elementos disponibles foco del teclado, pero no permite ningún tipo de interacción.

tematización

componente de menú (menú de widgets) usando framework jQuery UI CSS para definir la apariencia de su estilo. Si es necesario utilizar el menú de estilo especificado, puede utilizar el siguiente nombre de clase CSS:

  • ui-menu : el recipiente exterior del menú. Si el menú contiene un icono, el elemento pasará, además, con una ui-menu-icons , clase.
    • ui-menu-item : un contenedor de elementos de menú individuales.
      • ui-menu-icon : a través de los icons los iconos del menú secundario para ajustar las opciones.
    • ui-menu-divider : un elemento separador entre los elementos del menú.

confiar

información adicional

  • La parte funcional requiere un poco de CSS, de lo contrario no funcionará. Si crea un tema personalizado, utilice el archivo CSS widget de especificado como un punto de partida.

Ejemplos

Un sencillo menú jQuery UI (Menú). 

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> componente Menu (Menú de widgets) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Style>
  .ui-menú {
    Anchura: 200px;
  }
  </ Style>
  <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Cuerpo>
 
<Ul id = "Menú">
  <Li> <a href="#"> artículo 1 </a> </ li>
  <Li> <a href="#"> artículo 2 </a> </ li>
  <Li> <a href="#"> artículo 3 </a>
    <Ul>
      <Li> <a href="#"> artículo 3-1 </a> </ li>
      <Li> <a href="#"> artículo 3-2 </a> </ li>
      <Li> <a href="#"> artículo 3-3 </a> </ li>
      <Li> <a href="#"> artículo 3-4 </a> </ li>
      <Li> <a href="#"> artículo 3-5 </a> </ li>
    </ Ul>
  </ Li>
  <Li> <a href="#"> artículo 4 </a> </ li>
  <Li> <a href="#"> artículo 5 </a> </ li>
</ Ul>
 
<Script>
$ ( "#menu") .menu ();
</ Script>
 
</ Body>
</ Html>