jQuery UI API - Widget de pestañas (Tabs Widget)

Categoría

Widgets

Uso

Descripción:Un único área de contenido con múltiples paneles, cada panel asociado a un título de la lista.

Añadido en la versión:1.0

Las pestañas (Tabs) se usan generalmente para dividir el contenido en varias partes, ahorrando espacio, al igual que el acordeón (accordion).

Las pestañas (Tabs) requieren un conjunto específico de marcado que debe utilizarse para que funcionen correctamente:

• Las pestañas (Tabs) deben estar en una lista ordenada (<ol>) o en una lista desordenada (<ul>) en la lista.
• El "title" de cada pestaña debe estar dentro de un elemento de lista (<li>) y debe envolverse con unahrefancla con el atributo (<a>) envuelto.
• El panel de cada pestaña puede ser cualquier elemento válido, pero debe tener un id que corresponda al hash en el ancla de la pestaña correspondiente.

El contenido de cada panel de pestañas puede definirse en la página o cargarse mediante Ajax. Ambos métodos se basan en el ancla asociado a la pestaña.hrefSe manejan automáticamente. De forma predeterminada, las pestañas se activan al hacer clic, pero medianteeventla opción se puede cambiar o anular el evento.

A continuación se muestran algunos ejemplos de marcado:

<div id="tabs">
  <ul>
    <li><a href="../index.html">一</a></li>
    <li><a href="../index.html">二</a></li>
    <li><a href="../index.html">三</a></li>
  </ul>
  <div id="fragment-1">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>

Interacción con el teclado

Cuando el foco está en las pestañas, los siguientes comandos de teclado están disponibles:

• UP/LEFT: Mueve el foco a la pestaña anterior. Si está en la primera pestaña, mueve el foco a la última pestaña. Después de un breve retraso, activa la pestaña que tiene el foco.
• DOWN/RIGHT: Mueve el foco a la siguiente pestaña. Si está en la última pestaña, mueve el foco a la primera pestaña. Después de un breve retraso, activa la pestaña que tiene el foco.
• HOME: Mueve el foco a la primera pestaña. Después de un breve retraso, activa la pestaña que tiene el foco.
• END: Mueve el foco a la última pestaña. Después de un breve retraso, activa la pestaña que tiene el foco.
• SPACE: Activa el panel asociado a la pestaña que tiene el foco.
• ENTER: Activa o alterna el panel asociado a la pestaña que tiene el foco.
• ALT+PAGE UP: Mueve el foco a la pestaña anterior y la activa inmediatamente.
• ALT+PAGE DOWN: Mueve el foco a la siguiente pestaña y la activa inmediatamente.

Cuando el foco está en el panel, los siguientes comandos de teclado están disponibles:

• CTRL+UP: Mueve el foco a la pestaña correspondiente.
• ALT+PAGE UP: Mueve el foco a la pestaña anterior y la activa inmediatamente.
• ALT+PAGE DOWN: Mueve el foco a la siguiente pestaña y la activa inmediatamente.

Tematización

El widget de pestañas (Tabs Widget) utilizael framework CSS de jQuery UIpara definir el estilo de su apariencia y sensación. Si necesita usar estilos específicos de las pestañas, puede usar los siguientes nombres de clase CSS:

• ui-tabs: El contenedor externo de las pestañas. Cuando se establece lacollapsibleopción, este elemento además llevará unui-tabs-collapsible class.
  • ui-tabs-nav: La lista de pestañas.
    • El elemento de lista activo en la navegación tendrá unui-tabs-activeclass. El elemento de la lista cuyo contenido se carga mediante una llamada Ajax tendrá unui-tabs-loading class.
      • ui-tabs-anchor: El ancla utilizada para alternar los paneles.
  • ui-tabs-panel: El panel asociado a la pestaña. Solo es visible cuando la pestaña correspondiente está activa.

Dependencias

• Núcleo de UI (UI Core)
• Fábrica de widgets (Widget Factory)
• Núcleo de efectos (Effects Core)(Opcional; cuando se usa con lashowyhideopción)

Notas adicionales

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

Ejemplos

Un ejemplo simple de pestañas (Tabs) de jQuery UI.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>标签页部件（Tabs Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <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>
 
<div id="tabs">
  <ul>
    <li><a href="../index.html"><span>一</span></a></li>
    <li><a href="../index.html"><span>二</span></a></li>
    <li><a href="../index.html"><span>三</span></a></li>
  </ul>
  <div id="fragment-1">
    <p>第一个标签是默认激活的：</p>
    <code>$( "#tabs" ).tabs(); </code>
  </div>
  <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>
 
<script>
$( "#tabs" ).tabs();
</script>
 
</body>
</html>

Ver demostración