10 JQuery Snippets que todo diseñador debería saber
jQuery se usa en miles y miles de páginas web. Es una de las bibliotecas más comunes para insertar en páginas, y hace que la manipulación de DOM sea muy fácil.
Por supuesto, parte de la popularidad de jQuery es su simplicidad. Parece que podemos hacer casi cualquier cosa que nos guste con esta poderosa biblioteca.
Para todas las opciones que tenemos abiertas, hay algunos fragmentos que solemos volver una y otra vez. Hoy me gustaría darle 10 fragmentos que todos, novatos para gurús, utilizarán una y otra vez.
1) Volver al botón superior
// Back To Top
$('a.top').click(function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});
//Create an anchor tagBack to top
Como puede ver usando las funciones animate y scrollTop en jQuery, no necesitamos un complemento para crear una simple animación de scroll to top.
Al cambiar el valor de scrollTop podemos cambiar dónde queremos que desplace la barra de desplazamiento, en mi caso utilicé un valor de 0 porque quiero que vaya a la parte superior de nuestra página, pero si quisiera un offset de 100px podría simplemente escriba 100px en la función.
Entonces, todo lo que realmente estamos haciendo es animar el cuerpo de nuestro documento a lo largo de 800ms hasta que se desplaza hasta el final del documento.
2) Verificando si las imágenes están cargadas
$(‘img’).load(function() {
console.log(‘image load successful’);
});
Algunas veces necesita verificar si sus imágenes están completamente cargadas para continuar con sus scripts, este fragmento jQuery de tres líneas puede hacer eso fácilmente.
También puede verificar si una imagen en particular se ha cargado reemplazando la etiqueta img con una ID o clase.
3) Arregle las imágenes rotas automáticamente
$('img').error(function(){
$(this).attr('src', ‘img/broken.png’);
});
Ocasionalmente, tenemos momentos en los que tenemos enlaces de imagen rotos en nuestro sitio web y reemplazarlos uno por uno no es fácil, por lo que agregar esta simple pieza de código puede ahorrarle muchos dolores de cabeza.
Incluso si no tiene enlaces rotos agregar esto no hace ningún daño.
4) Alternar clase en vuelo estacionario
$(‘.btn').hover(function(){
$(this).addClass(‘hover’);
}, function(){
$(this).removeClass(‘hover’);
}
);
Por lo general, queremos cambiar el aspecto visual de un elemento que se puede hacer clic en nuestra página cuando el usuario pasa el cursor y este fragmento de jQuery hace eso, agrega una clase a su elemento cuando el usuario está suspendido y cuando el usuario lo detiene elimina la clase, por lo todo lo que necesita hacer es agregar los estilos necesarios en su archivo CSS.
5) Desactivar campos de entrada
$('input[type="submit"]').attr("disabled", true);
En ocasiones, puede querer que se deshabilite el botón de enviar de un formulario o incluso una de sus entradas de texto hasta que el usuario haya realizado una determinada acción (marcando la casilla "He leído los términos", por ejemplo) y esta línea de código logra ese; agrega el atributo deshabilitado a su entrada para que pueda habilitarlo cuando lo desee.
Para hacer eso, todo lo que necesita hacer es ejecutar la función removeAttr en la entrada con deshabilitado como parámetro:
$('input[type="submit"]').removeAttr("disabled”);
6) Detener la carga de enlaces
$(‘a.no-link').click(function(e){
e.preventDefault();
});
A veces no queremos enlaces para ir a una página determinada o incluso volver a cargarla, queremos que hagan algo más como activar otro script y en ese caso este código hará el truco de prevenir la acción predeterminada.
7) Alternar fade / slide
// Fade
$( “.btn" ).click(function() {
$( “.element" ).fadeToggle("slow");
});
// Toggle
$( “.btn" ).click(function() {
$( “.element" ).slideToggle("slow");
});
Las diapositivas y los desvanecimientos son algo que utilizamos mucho en nuestras animaciones usando jQuery, a veces solo queremos mostrar un elemento cuando hacemos clic en algo y para eso los métodos fadeIn y slideDown son perfectos, pero si queremos que ese elemento aparezca en el primer clic y luego desaparecerán en el segundo esta pieza de código funcionará bien.
8) Acordeón simple
// Close all Panels
$('#accordion').find(‘.content').hide();
// Accordion
$('#accordion').find(‘.accordion-header').click(function(){
var next = $(this).next();
next.slideToggle('fast’);
$(‘.content’).not(next).slideUp('fast’);
return false;
});
Al agregar esta secuencia de comandos, todo lo que necesita en su página es el HTML necesario para que funcione.
Como puede ver en este fragmento, primero cerré todos los paneles de nuestro acordeón y luego, en el evento de clic, hice que el contenido vinculado a ese encabezado se alternase y todos los demás se deslizaran hacia arriba. Es un método simple para un acordeón rápido.
9) Haz dos divs de la misma altura
$(‘.div').css('min-height', $(‘.main-div').height());
A veces quieres que dos divs tengan la misma altura sin importar el contenido que tengan en ellos, este pequeño fragmento permite eso; en este caso, establece la altura mínima, lo que significa que puede ser más grande que el div principal, pero nunca más pequeño. Esto es ideal para sitios web de mampostería.
10) Zebra despojado lista desordenada
$('li:odd').css('background', '#E8E8E8’);
Con este pequeño fragmento puedes crear fácilmente listas desordenadas ordenadas de cebra, esto coloca el fondo que defines en cada elemento de lista impar para que puedas ubicar el predeterminado para los pares en tu archivo CSS. Puede agregar este fragmento a cualquier tipo de marcado, desde tablas a divisiones simples, cualquier cosa que quiera ser cebra despojada.
Conclusión
Estas son las piezas del código jQuery que utilizo una y otra vez en mis proyectos. Espero que marque esta página y regrese cada vez que necesite uno de estos fragmentos.
¿De qué fragmentos de jQuery confías? ¿Tiene un mejor código para estos escenarios? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen útil a través de Shutterstock.