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

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

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.

imagen0.jpg

Aquí, usted ve las partidas de libros. Los detalles para la primera de ellas están disponibles, pero los detalles los demás libros 'están ocultos.

image1.jpg

Este efecto maravilloso permite al usuario centrarse en una parte específica de un contexto más amplio, mientras que ver el contorno general. Se llama acordeón debido a las diferentes piezas se expanden y contraen para permitir al usuario centrarse en una parte sin perder el lugar de su posición. Contenido plegable se ha convertido en una herramienta importante usabilidad hecho popular por la barra del sistema en Mac OS y otras herramientas de usabilidad populares.

El efecto acordeón es sorprendentemente fácil de lograr con jQuery:

accordion.html
Acordeón 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

Como se puede ver mirando por encima del código, es principalmente sólo HTML. El efecto es realmente fácil de lograr:

  1. Importar todos los sospechosos habituales.

    Es necesario para importar los archivos jQuery UI javascript jQuery y, y un archivo de tema de CSS. También es necesario asegurarse de que el CSS tiene acceso a la imágenes directorio con iconos y fondos porque va a utilizar algunas de estas imágenes de forma automática.

  2. Construye tu página HTML de forma normal.

    Construye una página HTML como lo haría normalmente. Preste atención a las secciones que desee colapsar. Normalmente No debe ser una etiqueta de partida para cada elemento, todo al mismo nivel.

  3. Crear un div que contiene todo el contenido plegable.

    Ponga todo el contenido plegable en una sola div con un ID. Se le convirtiendo este div en un elemento jQuery acordeón.

  4. Añadir un ancla alrededor de cada título que desea especificar como plegable.

    Coloque una etiqueta de anclaje vacía () Alrededor de cada título que desea utilizar como título plegable. El signo indica que el ancla llamará a la misma página y se utiliza como un marcador de posición por el motor jQuery UI. Puedes añadir el ancla directamente en el HTML o mediante código de jQuery.

  5. Crear un jQuery en eso()función.

    Utilice las técnicas normales para construir un inicializador jQuery.

  6. Aplique la acordeón () método para la div.

    Usar jQuery para identificar el div que contiene contenido plegable y aplicar acordeón () a la misma:

     función init () {$ ("# acordeón") acordeón () -.}



Artículos Relacionados

Sobre el autor
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

Los métodos comunes de nodo jQuery Los métodos comunes de nodo jQuery

La librería jQuery convierte objetos DOM en poderosos nodos jQuery. La siguiente tabla muestra algunos de los métodos más utilizados del nodo jQuery.MétodoDescripciónaddClass (), removeClass (), toggleClass ()Aplica o quita una clase CSS a un…

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

jQuery se puede utilizar para agregar HTML a una página. Usted puede agregar todo tipo de HTML, imágenes, casi cualquier cosa, y cambiar por completo el diseño de la página usando jQuery. Si lo hace, no es realmente una buena idea, ya que puede…

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…

Cómo incorporar el jQuery ready () función Cómo incorporar el jQuery ready () función

Un problema común en la programación de javascript es que el programa de javascript se ejecutará antes de que se cargue la página. Se puede acceder a los elementos HTML en una página. Esto significa que también puede acceder a cosas…

Cómo instalar jQuery Cómo instalar jQuery

Hay dos formas de usar jQuery, ya sean descargados de forma local o en una red de entrega de contenido (CDN). La copia local es sólo eso, un archivo que se encuentra dentro de la raíz del documento en el disco duro de su servidor. Una versión…

Cómo seleccionar elementos con jQuery Cómo seleccionar elementos con jQuery

ost de lo que va a hacer en jQuery sucede a través de selectores. Por ejemplo, podrás frecuencia selecciona una pieza de una página web y luego tener jQuery realizar una acción en ese pedazo de la página. Esa acción podría ser cualquier cosa…

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 diseñar estilos CSS3 Cómo diseñar estilos CSS3

Hay una serie de consideraciones para esta aplicación CSS3 desde una perspectiva estilo. Sin embargo, la necesidad más urgente es proporcionar un medio de mostrar los gráficos en una forma que el usuario esperaría, a pesar de la forma en que se…

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 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 utilizar el widget de acordeón en ajax para HTML5 y CSS3 programación