+54 (011) 5032-8220 VENTAS
United States

En el diseño y el desarrollo web actual, es muy importante cuidar la usabilidad que le damos al usuario final y para ello se han inventado frameworks tan útiles y fáciles de usar como jQuery. El simple hecho de poder programar una capa para que se oculte o se muestre sin refrescar la página a la hora de realizar cualquier función ya sea un acceso de usuario (login), un envío de contacto o una petición de algún dato, puede ayudarnos a mantener al usuario en nuestra página web por más tiempo y facilitarle mucho más las cosas para conseguir lo que de verdad quiere.

Programar en javascript con jQuery es muy sencillo y para ocultar o mostrar una cara con este famoso framework basta con el siguiente código:

Creamos la capa que se va a ocultar con jQuery:

<div id=”me-oculto” class=”capa”>

Esta capa se ocultará cuando pulse <a href=”#” class=”link-ocultar”>este link</a>.

</div>

Ahora creamos la capa que aparecerá cuando la otra se oculte:

<div id=”me-muestro” class=”capa”>

Hola, yo antes estaba oculta. <br />

Si quieres ver la otra capa, <a href=”#” class=”link-muestra”>pulsa aquí</a>

</div>

Una vez creadas las capas pertinentes empezamos con lo divertido. En jQuery existe una función que muestra o oculta una capa de manera automática, es decir, si la capa está oculta, la muestra y si está a la vista, la oculta, pero nosotros vamos a usar dos funciones más sencillas para entender como funciona este framework, vamos al lío:

//primero controlamos que enlace se pulsa y después actuamos
(‘.link-ocultar’).click(function() {
$(‘#me-muestro’).show();
$(‘#me-oculto’).hide();
});
//ahora a la inversa para que funcione correctamente
(‘.link-mostrar’).click(function() {
$(‘#me-muestra’).hide();
$(‘#me-oculto’).show();
});

Con estos sencillos pasos ya tendremos una capa que se oculta o se muestra dependiendo del enlace que pulsemos en cada momento de manera sencilla, pero ¿cómo podríamos hacerlo en tan solo 3 líneas de código? Para simplificar esta sencilla acción que además es bastante común en los diseños web actuales, los desarrolladores de jQuery han creado una función que hace todo el proceso mucho más sencillo y rápido, pero con el mismo efecto y rendimiento.

La función de la que os hablamos se llama “toggle()” y tan solo tendremos que aplicarle al evento de un enlace esta función aplicada a la misma capa que queramos ocultar o mostrar. Es más sencillo si lo vemos:

Primero el enlace sería así:

<a href=”#” class=”muestroculto”>Click aquí</a>

Ahora el jQuery:

(‘.muestroculto’).click(function() {
$(‘#me-oculto’).toggle();
});

Con estas tres sencillas líneas conseguiremos el efecto que buscábamos de una manera atractiva y sencilla para todo el mundo y además con menos código.

About Author

You may also like