Los 10 scripts de jQuery que todo diseñador debería tener en su agenda

jQuery se utiliza en miles y miles de páginas web. Es una de las librerías más comunes a insertar en páginas web, y hace que la manipulación del DOM sea coser y cantar. Por supuesto, la popularidad de jQuery se debe en gran parte a su sencillez. Es posible realizar casi cualquier cosa que se te ocurra con esta útil librería.

Por todas las opciones que tenemos a nuestro alcance, hay algunos scripts que tienden a volver a una y otra vez. En este artículo, comparto con vosotros 10 scripts que todo el mundo, desde los novatos a los gurús, utilizarán una y otra vez.

Botón para volver arriba

// Back To Top
$('a.top').click(function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});
//Create an anchor tag
<a class=”top” href=”#”>Back to top</a>

Como puedes ver, utilizando las funciones animate y scrollTop de jQuery no necesitamos un plugin que nos desarrolle una animación para volver a la parte superior de la página.

Cambiando el valor del scrollTop, podemos cambiar donde queremos que pare el scrollbar, en mi caso he utiliza el valor 0 porque quiero ir hacia la parte más superior de la web, pero si queremos un offset de 100px, solamente completa el código con el valor 100px en la función.

El número 800 que vemos en el código se refiere a la velocidad en milisegundos que queremos que dure la animación de volver arriba. Si queremos que vaya más lenta, pon más milisegundos.

Comprobar que se han cargado las imágenes

$(‘img’).load(function() {
console.log(‘image load successful’);
});

Hay veces que necesitas comprobar si las imágenes se han cargado por completo para continuar con tus scripts. Estas tres líneas de jQuery puede hacer esta tarea de manera sencilla.

También puedes comprobar si una imagen en partícular se ha cargado ya reemplazando el tag img con el ID o la clase de la imagen.

Arreglar imágenes rotas automáticamente

$('img').error(function(){
$(this).attr('src', ‘img/broken.png’);
});

De vez en cuando pasa que, en nuestra página web, hay alguna imagen que no carga o que se ha corrompido y, sustituir una es fácil, vigilar que todas las imágenes estén bien, ya no tanto. Con este sencillo script puedes ahorrarte muchos dolores de cabeza. Es totalmente inofensivo, por lo que puedes añadirlo en tu página web aún si no tienes ningún enlace roto.

Clase toggle en hover

$(‘.btn').hover(function(){
$(this).addClass(‘hover’);
}, function(){
$(this).removeClass(‘hover’);
}
);

Por lo general, se suele cambiar el modo de visualizarse un elemento clicable en nuestra página cuando el usuario se posa con el ratón encima. Este script de jQuery hace justamente eso, añade una clase a tu elemento cuando el usuario posa el ratón encima, y cuando el usuario deja de hacerlo, elimina la clase. Así que todo lo que tienes que hacer es agregar los estilos necesarios en la hoja de estilos.

Deshabilitar los campos input

$('input[type="submit"]').attr("disabled", true);

En ocasiones es posible que desees que el botón submit de un formulario o incluso uno de sus campos inputs se desactiven hasta que el usuario haya realizado una determinada acción (marcar la casilla "He leído los términos" por ejemplo) y esta línea de código logra exáctamente eso: agrega el atributo disabled al input para que puedas activarlo cuando desees.

Solo tienes que ejecutar la función removeAttr en el input con el disabled como parámetro:

$('input[type="submit"]').removeAttr("disabled”);

Parar la carga de enlaces

$(‘a.no-link').click(function(e){
e.preventDefault();
});

A veces no queremos que los enlaces vayan a una página determinada, queremos que hagan otras cosas, como disparar otro script y en ese caso, este script te servirá. Lleva a cabo el truco de impedir la acción predeterminada del enlace.

Toggle fade/slide

// Fade
$( “.btn" ).click(function() {
$( “.element" ).fadeToggle("slow");
});
// Toggle
$( “.btn" ).click(function() {
$( “.element" ).slideToggle("slow");
});

Los slides y los fades son algo que utilizamos un montón en nuestras animaciones de jQuery. Hay veces que solo queremos reproducirlos cuando hacemos clic en elementos en concreto, y para ello los métodos fadeIn y SlideDown son perfectos. Pero si queremos que un elemento aparezca en el primer clic y se esconda en el segundo, este script te ayudará a ello.

Acordéon 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;
});

Crear dos divs con la misma altura

$(‘.div').css('min-height', $(‘.main-div').height());

Seguramente, en algún proyecto habrás querido tener dos divs con la misma altura sin importar el contenido que tengan. Este pequeño script te ayudará a darle forma precisamente a eso. En este caso establecemos el min-height, que es la altura mínima que tendrá que tener el contenedor, pudiendo ser más grande que el div principal, pero nunca más pequeño. Trabajo de albañilería para sitios web como habrás podido ver.

Lista desordenada estilo cebra

$('li:odd').css('background', '#E8E8E8’);

Fuente: webdesignerdepot.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP