Tecnología

Inicio

Cómo Contraer un div con jQuery

Cómo Contraer un div con jQuery


jQuery es una biblioteca de JavaScript de código abierto diseñado para ejecutar funciones de secuencias de comandos en una página web utilizando los recursos del lado del cliente. De este modo, se reduce el ancho de banda requerido para cargar y procesar esas funciones en la parte del servidor web. Un aspecto de jQuery que puede resultar útil en sus esfuerzos de desarrollo web es su capacidad incorporada para cambiar instantáneamente los estilos de un contenedor DIV llamado. El uso de esta capacidad, puede contraer un DIV con el clic de un ratón.

Instrucciones

1 Abra la página web con el contenedor DIV desea colapsar en un editor de texto. Asegúrese de que el DIV tiene un elemento de estilo altura especificada y un valor de "ID".

2 Escriba el siguiente código debajo de su contenedor DIV:

<Script>

$ ( "# Caja"). Uno ( "clic", function () {

$( this ).css( "height","-=200" );

});

</ Script>

Su contenedor DIV ahora se colapsará en altura por 200 píxeles cuando se hace clic. Sustituir el valor de ID de su contenedor DIV para "caja" y la cantidad de píxeles que se desea disminuir la altura de la DIV por cuando se hace clic en "200"

3 Guardar y publicar el documento. Ajustar el valor numérico según sea necesario.

Consejos y advertencias

  • En este tutorial se supone que ya ha incluido la librería jQuery en su página web. Si su DIV no se derrumba cuando se hace clic, agregue el código siguiente en el <head> de su documento:
  • <Script type = "text / javascript" src = "scripts / jquery-1.2.6.min.js"> </ script>