¿Cómo construir una interfaz con pestañas en ajax para HTML5 y CSS3 programación

categoría Computadoras y software / Programación / Ajax

Una técnica importante en el desarrollo web HTML5 y CSS3 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 en un momento, pero las fichas son todos visibles. La interfaz con pestañas es un poco más predecible que el acordeón porque las pestañas (a diferencia de las partidas del acordeón) se quedan en el mismo lugar.

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

imagen0.jpg

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

image1.jpg

Al igual que el acordeón, el efecto pestaña es increíblemente fácil de lograr. Revise el código:

tabs.html
Tab demo
Libro I - Creación de la Fundación HTML
  1. Fundaciones HTML Sonido
  2. Sólo se trata de Validación
  3. La elección de sus Herramientas
  4. Gestión de la información con Listas y Tablas
  5. Hacer conexiones con Enlaces
  6. Adición de Imágenes
  7. Creación de formularios
Libro II - Styling con CSS
  1. Colorear su mundo
  2. Styling texto
  3. Selectores, Clase y Estilo
  4. Fronteras y Fondos
  5. Los niveles de CSS
Libro III - El uso de CSS posicional de diseño
  1. Diversión con el flotador Fabulous
  2. Edificio flotante formatos de páginas
  3. Listas de estilo y menús
  4. Usando Posicionamiento alternativa

El mecanismo para la construcción de una interfaz basada en la pestaña es muy similar a la de acordeones:

  1. Añadir todos los archivos correspondientes.

    Como 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 los gráficos de fondo del tema.

  2. Construir HTML como normal.

    Si usted está construyendo una página web bien organizada 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 en.

  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 deben colocar en el lengüeta div.

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

    Construir un menú de enlaces. Coloque esto en la parte superior de la div pestañas. Cada enlace debe ser un vínculo local a uno de los divs. Por ejemplo, el índice se ve así:
    • Libro 1
    • Libro 2
    • Libro 3

    • Construir un en eso() función como de costumbre.

      Utilice las técnicas normales de jQuery.

    • Llama a fichas () método en el div principal.

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



    Artículos Relacionados

    Sobre el autor
    Cómo utilizar el widget de acordeón en ajax para HTML5 y CSS3 programación Cómo utilizar el widget de acordeón en ajax para HTML5 y CSS3 programación

    Algunas de las más poderosas herramientas de jQuery son en realidad los más fáciles de utilizar en la programación HTML5 y CSS3. El widget de acordeón se ha convertido en una parte muy popular del conjunto de herramientas de jQuery UI.Aquí,…

    Cómo utilizar el objeto ajax jquery para HTML5 y CSS3 programación Cómo utilizar el objeto ajax jquery para HTML5 y CSS3 programación

    El objeto jQuery en AJAX es interesante porque es fácil de crear a partir de una variedad de elementos DOM para la programación HTML5 y CSS3, y porque añade maravillosas, nuevas funciones a estos elementos.Cómo cambiar el estilo de un elementoSi…

    Cómo usar ajax y jQuery para su inclusión en el cliente de su sitio HTML5 y CSS3 Cómo usar ajax y jQuery para su inclusión en el cliente de su sitio HTML5 y CSS3

    AJAX le puede dar los mismos efectos para su HTML5 y CSS3 que incluye el lado del servidor (SSI) hace. La página se verá exactamente lo mismo, pero un método completamente diferente se utiliza para lograr su objetivo.csAJAX.html

    Añadir clases de interfaz de usuario jQuery para estilos temáticos Añadir clases de interfaz de usuario jQuery para estilos temáticos

    Estas clases CSS se definen en un tema jQuery UI. Si usted está utilizando jQuery UI, puede agregar cualquiera de estas clases para los objetos que añadir los estilos temáticos.ClaseUtilizado enDescripciónui-ReproductorEnvase exterior del widget…

    Cómo agregar jQuery a una página Cómo agregar jQuery a una página

    Una vez que haya descargado o jQuery sabe dónde encontrar la versión hospedada-CDN, es necesario hacer referencia a él en su página. jQuery es como cualquier archivo externo javascript.Añadir jQuery local para una páginaDescargar jQuery y…

    Recursos jquery Online Recursos jquery Online

    A medida que adquiera experiencia con jQuery, es probable que tenga preguntas acerca de las técnicas más avanzadas jQuery. Y después de utilizar jQuery plug-ins, podrás enganchado y quiere conseguir más. jQuery.com ofrece una gran cantidad de…

    ¿Cómo gestionar páginas web en múltiples pestañas en su tablet Android ¿Cómo gestionar páginas web en múltiples pestañas en su tablet Android

    La aplicación Chrome, así como otros navegadores web de tabletas Android, utiliza una interfaz con pestañas para ayudarle a acceder a más de una página Web a la vez. Vea a continuación para ver un par de pestañas que marchan a través de la…

    ¿Cómo gestionar páginas web en múltiples pestañas en el navegador galaxy tab ¿Cómo gestionar páginas web en múltiples pestañas en el navegador galaxy tab

    La aplicación Navegador Samsung Galaxy Tab utiliza una interfaz con pestañas para mostrar más de una página web a la vez. Cuando navegador abierto, es probable que se verá las pestañas que marchan a través de la pantalla de la aplicación…

    Cómo agregar un tema css3 a su proyecto Cómo agregar un tema css3 a su proyecto

    Al ver las muestras de los proveedores y de trabajo a través de la documentación son útiles, pero la mayoría de los desarrolladores quieren ver un tema CSS3 en acción. En todos los casos, lo único que realmente necesita modificar es la Copie…

    Cómo realizar transformaciones jquery para sitios css3 Cómo realizar transformaciones jquery para sitios css3

    Es posible utilizar jQuery para realizar transformaciones y estas transformaciones son a menudo más potente, pero fácil de usar, que las transformaciones CSS3 nativos. Sin embargo, a fin de obtener esta funcionalidad, debe descargar un jQuery…

    Cómo utilizar jQuery para crear una interfaz con pestañas en css3 Cómo utilizar jQuery para crear una interfaz con pestañas en css3

    Para algunos sitios web de una interfaz con pestañas es el mejor método para mostrar la información. CSS3 tiene código para utilizar el método de jQuery para crear una interfaz con pestañas.$ (function () {// Crear las variables para mantener…

    Cómo ver demos css3 interactivos Cómo ver demos css3 interactivos

    La carpeta de desarrollo de haz de CSS3 en jQuery contiene una gran cantidad de material útil. Una de las primeras piezas que usted debe mirar es el contenido de la carpeta demos desarrollo paquete, que contiene ejemplos de cómo utilizar los…

    » » » » ¿Cómo construir una interfaz con pestañas en ajax para HTML5 y CSS3 programación