jQuery UI API - Widget de Menú (Menu Widget)

Categoría

Widgets

Uso

Descripción:Menú tematizable para navegación con interacción de ratón y teclado.

Añadido en la versión:1.9

El menú se puede crear con cualquier marcado válido, siempre que los elementos tengan una estricta relación padre/hijo y cada elemento tenga un ancla. El elemento más comúnmente utilizado es una lista desordenada (<ul>）：

<ul id="menu">
  <li><a href="../index.html">Item 1</a></li>
  <li><a href="../index.html">Item 2</a></li>
  <li><a href="../index.html">Item 3</a>
    <ul>
      <li><a href="../index.html">Item 3-1</a></li>
      <li><a href="../index.html">Item 3-2</a></li>
      <li><a href="../index.html">Item 3-3</a></li>
      <li><a href="../index.html">Item 3-4</a></li>
      <li><a href="../index.html">Item 3-5</a></li>
    </ul>
  </li>
  <li><a href="../index.html">Item 4</a></li>
  <li><a href="../index.html">Item 5</a></li>
</ul>

Si se utiliza una estructura no<ul>/<li>, para el menú y los elementos del menú utilice el mismo elemento, utilicemenusla opción para distinguir los dos elementos, por ejemplomenus: "div.menuElement"。

Se puede añadiendo al elementoui-state-disabledclass para deshabilitar cualquier elemento del menú.

Iconos

Para añadir iconos al menú, incluya el icono en el marcado:

<ul id="menu">
  <li><a href="../index.html"><span class="ui-icon ui-icon-disk"></span>Save</a></li>
</ul>

El menú (Menu) añadirá automáticamente el padding necesario a los elementos sin iconos.

Separadores

Los elementos separadores se pueden crear incluyendo elementos de menú sin enlazar, que solo pueden ser espacios/guiones:

<ul id="menu">
  <li><a href="../index.html">Item 1</a></li>
  <li>-</li>
  <li><a href="../index.html">Item 2</a></li>
</ul>

Interacción con el teclado

  • ENTER/SPACE: Invoca la acción del elemento de menú enfocado, lo que puede abrir un submenú.
  • UP: Mueve el foco al elemento de menú anterior.
  • DOWN: Mueve el foco al siguiente elemento de menú.
  • RIGHT: Abre un submenú si está disponible.
  • LEFT: Cierra el submenú actual y mueve el foco al elemento de menú principal. Si el foco no está en un submenú, no realiza ninguna acción.
  • ESCAPE: Cierra el submenú actual y mueve el foco al elemento de menú principal. Si el foco no está en un submenú, no realiza ninguna acción.

Escribir una letra mueve el foco al primer elemento que comienza con esa letra. Repetir el mismo carácter recorrerá los elementos coincidentes. Si se escriben más caracteres en un período de tiempo, se buscará una coincidencia con los caracteres escritos.

Los elementos deshabilitados pueden recibir el foco del teclado, pero no se permite ninguna interacción.

Tematización

El widget de menú (Menu Widget) utilizajQuery UI CSS Frameworkpara definir el estilo de su apariencia y sensación. Si necesita usar estilos específicos del menú, puede usar los siguientes nombres de clase CSS:

  • ui-menu: el contenedor exterior del menú. Si el menú contiene iconos, este elemento también tendrá unui-menu-icons class.
    • ui-menu-item: el contenedor de un solo elemento de menú.
      • ui-menu-icon: medianteiconsla opción para establecer el icono del submenú.
    • ui-menu-divider: el elemento separador entre elementos del menú.

Dependencias

Notas adicionales

  • Este widget requiere algo de CSS funcional; de lo contrario, no funcionará. Si crea un tema personalizado, use el archivo CSS específico del widget como punto de partida.

Ejemplos

Un menú simple de jQuery UI (Menu).

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>菜单部件（Menu Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  .ui-menu {
    width: 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>
<body>
 
<ul id="menu">
  <li><a href="../index.html">Item 1</a></li>
  <li><a href="../index.html">Item 2</a></li>
  <li><a href="../index.html">Item 3</a>
    <ul>
      <li><a href="../index.html">Item 3-1</a></li>
      <li><a href="../index.html">Item 3-2</a></li>
      <li><a href="../index.html">Item 3-3</a></li>
      <li><a href="../index.html">Item 3-4</a></li>
      <li><a href="../index.html">Item 3-5</a></li>
    </ul>
  </li>
  <li><a href="../index.html">Item 4</a></li>
  <li><a href="../index.html">Item 5</a></li>
</ul>
 
<script>
$( "#menu" ).menu();
</script>
 
</body>
</html>

Otras extensiones