Video: Tutoriales jQuery - Tabs (Pestañas)

Una técnica importante en HTML5 y CSS3 desarrollo web es el uso de una interfaz con pestañas en AJAX. Esto permite al usuario cambiar el contenido de un segmento mediante la selección de uno de una serie de pestañas.

En una interfaz con pestañas, sólo un elemento es visible a la vez, pero las lengüetas son todos visibles. La interfaz con pestañas es un poco más predecible que el acordeón porque las lengüetas (a diferencia de las partidas del acordeón) permanecen en el mismo lugar.

Las pestañas cambian de color para indicar la ficha que se encuentra iluminado, y también cambian de estado (normalmente mediante el cambio de color) para indicar que están siendo sobrevolaban. Al hacer clic en otra pestaña, el área de contenido principal del widget se reemplaza con el contenido correspondiente.

Esto es lo que sucede cuando el usuario hace clic en la pestaña.

Al igual que el acordeón, el efecto pestaña es muy fácil de lograr. Mirar por encima del código:

pestaña demostración
Libro 1
libro 2
libro 3
Libro I - Creación de la Fundación HTML
Fundamentos de sonido HTML
Sólo se trata de Validación
La elección de sus herramientas
Gestión de la información con Listas y Tablas
Cómo realizar las conexiones con los enlaces
Adición de Imágenes
Creación de formularios
Libro II - Styling con CSS
Colorear su mundo
estilo de texto
Selectores, Clase y Estilo
Bordes y fondos
Los niveles de CSS
Libro III - El uso de CSS posicional de diseño
Diversión con el flotador fabuloso
Edificio flotante diseños de página
Estilos de listas y menús
El uso de posicionamiento alternativo

El mecanismo para la creación de una interfaz basada en fichas es muy similar a la de acordeones:

1. Añadir todos los archivos correspondientes.

   Al igual que la mayoría de los efectos jQuery UI, necesita jQuery, jQuery UI, y un archivo de tema de CSS. También es necesario el acceso a la imágenes directorio para el tema de gráficos de fondo.

2. Construir HTML de forma normal.

   Si usted está construyendo una página web bien organizado de todos modos, ya está muy cerca.

3. Construir un div que contiene todos los datos tabulados.

   Este es el elemento que se va a realizar la magia de jQuery sucesivamente.

4. Coloque principales áreas de contenido en divs con nombre.

   Cada pieza de contenido que se mostrará como una página debe ser colocado en un div con una identificación descriptiva. Cada uno de estos divs se debe colocar en el lengüeta div.

5. Añadir una lista de enlaces locales en el contenido.

   Construir un menú de enlaces. Coloque esta en la parte superior de la div pestañas. Cada enlace debe ser un enlace local para uno de los divs. Por ejemplo, el índice es el siguiente:

6. Libro 1
7. libro 2
8. libro 3

9. construir una en eso() funcionan como de costumbre.

   Video: Tutoriales jQuery - Login Desplegable

   Utilizar las técnicas normales de jQuery.

10. Llama a pestañas() método en el div principal.

    Increíblemente, una línea de código jQuery hace todo el trabajo.