jQuery UI API - miembro de pestaña (aquí Widget)

categoría

Los widgets (widgets)

uso

Descripción: Un área de contenido única de múltiples paneles, cada panel en el título de la lista.

Nueva Versión: 1.0

Tabs (pestañas) se utiliza normalmente el contenido en una pluralidad de secciones, con el fin de ahorrar espacio, al igual que el acordeón (acordeón) del mismo.

Tabs (pestañas) tiene un conjunto específico de las etiquetas que se debe utilizar con el fin de funcionar correctamente fichas:

• Tabs (pestañas) deben ser una ordenada ( <ol> ) o no ordenada ( <ul> lista)
• etiqueta "Título" de cada página debe ser un elemento de la lista ( <li> interna), y debe ser utilizado con un href atributo del anclaje ( <a> ) paquete.
• Cada placa etiqueta puede ser cualquier elemento de página válido, pero debe tener un ID, anclaje de hash asociada con el identificador de pestañas correspondientes.

El contenido de cada página de lengüeta de la placa se pueden definir en la página es buena, o se puede cargar a través de Ajax. Ambos métodos se basan en la página correspondiente de la etiqueta de anclaje href proceso automático. De forma predeterminada, cuando se hace clic en la pestaña para activar, sino por event opciones que se pueden cambiar o anular evento.

Estas son algunas de las etiquetas de muestra:

<div id = "pestañas">
  <Ul>
    <Li> <a href="#fragment-1"> un </a> </ li>
    <Li> <a href="#fragment-2"> dos </a> </ li>
    <Li> <a href="#fragment-3"> tres </a> </ li>
  </ Ul>
  <Div id = "fragmento-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 = "fragmento-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 = "fragmento-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 una ficha, los siguientes comandos del teclado:

• Arriba / Izquierda: Mover el cursor a la ficha anterior. Si la etiqueta en la primera página, a continuación, mover el foco a la última pestaña. En un breve retraso después de la activación de la ficha enfocada.
• Abajo / Derecha: Mover el cursor a la siguiente pestaña. Si una etiqueta en la última página, a continuación, mover el foco a la primera pestaña. En un breve retraso después de la activación de la ficha enfocada.
• INICIO: Mover el cursor a la primera pestaña. En un breve retraso después de la activación de la ficha enfocada.
• END: Mover el cursor a la última pestaña. En un breve retraso después de la activación de la ficha enfocada.
• ESPACIO: activación asociada con el panel de pestañas enfocada.
• INTRO: Active o interruptor asociado con el panel de pestañas enfocada.
• ALT + RE PÁG: Mover el cursor a la ficha anterior y se activa inmediatamente.
• ALT + AV PÁG: Mover el cursor a la siguiente ficha, y se activa inmediatamente.

Cuando la atención se centra en el panel, los siguientes comandos del teclado:

• CTRL + UP: Mueve el cursor hasta la ficha correspondiente.
• ALT + RE PÁG: Mover el cursor a la ficha anterior y se activa inmediatamente.
• ALT + AV PÁG: Mover el cursor a la siguiente ficha, y se activa inmediatamente.

tematización

miembro de pestaña (aquí Widget) usando framework jQuery UI CSS para definir la apariencia de su estilo. Si es necesario utilizar las pestañas de estilo especificado, puede utilizar el siguiente nombre de clase CSS:

• ui-tabs : la ficha recipiente exterior. Cuando se establece un collapsible opciones -time, los elementos adicionales se proporcionan con una ui-tabs-collapsible , clase.
  • ui-tabs-nav : lista de pestañas.
    • elemento de la lista de navegación se activará con una ui-tabs-active , clase. El contenido cargado a través de llamada Ajax aparecerá con una lista de elementos ui-tabs-loading , clase.
      • ui-tabs-anchor : Panel de control para los anclajes.
  • ui-tabs-panel : los paneles relacionados con tabuladores. Sólo en la ficha correspondiente es visible sólo cuando se activa.

confiar

• IU núcleo (Core interfaz de usuario)
• Biblioteca de componentes (Widget Factory)
• Efectos Core (Core Effects) (opcional; cuando el show y hide cuando se utiliza con opciones)

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 simple pestañas jQuery UI (pestañas).

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> elemento de lengüeta (aquí Widget) Demo </ 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>
<Cuerpo>
 
<div id = "pestañas">
  <Ul>
    <Li> <a href="#fragment-1"> <span> a </ span> </a> </ li>
    <Li> <a href="#fragment-2"> <span> dos </ span> </a> </ li>
    <Li> <a href="#fragment-3"> <span> tres </ span> </a> </ li>
  </ Ul>
  <Div id = "fragmento-1">
    <P> La primera etiqueta está activada por defecto: </ p>
    <Code> $ ( "") #tabs .tabs (); </ code>
  </ Div>
  <Div id = "fragmento-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 = "fragmento-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 demo