Somos varios los desarrolladores que tenemos un juego de snippets siempre a mano para no perder tiempo reescribiendo código idéntico una y otra vez.
Para los que se especialicen en el Frontend, aquà les dejo un puñado de snippets de Javascript y jQuery para validar e-mails, chequear la carga de imágenes, desactivar el clic derecho del mouse, pasar parámetros con setTimeout, crear selectores personalizados y cancelar peticiones de AJAX.
Hacer un refresh del atributo src de una imagen:
-
$(imageobj).attr('src', $(imageobj)
-
.attr('src') + '?' + Math.random() );
Chequear si una imagen fue cargada:
-
var imgsrc = 'img/image1.png';
-
$('<img/>').load(function () {
-
alert('La imagen se cargó');
-
}).error(function () {
-
alert('Error al cargar la imagen');
-
}).attr('src', imgsrc);
Chequear si un set de imágenes se cargó:
Para este ejemplo, chequearemos si 10 imágenes fueron cargadas correctamente:
-
var totalImagenes = 10;
-
var imagenesCargadas = 0;
-
$("<img/>").load(function() {
-
++imagenesCargadas;
-
if(imagenesCargadas == totalImagenes){
-
//Las 10 imágenes fueron cargadas
-
}
-
});
Remover un texto seleccionado luego de hacer doble clic con el mouse:
-
clearSelection : function () {
-
if(document.selection && document.selection.empty) {
-
document.selection.empty();
-
} else if(window.getSelection) {
-
var sel = window.getSelection();
-
sel.removeAllRanges();
-
}
-
}
-
$(element).bind('dblclick',function(event){
-
//hacer algo
-
clearSelection();
-
});
Validar dirección de e-mail (lÃnea ofuscadÃsima ^_^):
-
var email = 'info@tympanus.net' //Obviamente esta variable la tomaremos de un form o algo asà ^_^
-
if(!(/^((([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+(.([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+)*)|((x22)((((x20|x09)*(x0dx0a))?(x20|x09)+)?(([x01-x08x0bx0cx0e-x1fx7f]|x21|[x23-x5b]|[x5d-x7e]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(\([x01-x09x0bx0cx0d-x7f]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))))*(((x20|x09)*(x0dx0a))?(x20|x09)+)?(x22)))@((([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).)+(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).?$/i.test(email)))
-
alert('e-mail inválido');
Ordenar Ãtems de una lista:
Nótese que usamos la clase "para_ordenar" en la lista.
-
<ul>
-
<li>Pérez</li>
-
<li>Gómez</li>
-
<li>Ãlvarez</li>
-
<li>MartÃnez</li>
-
</ul>
-
-
var items = $('.para_ordenar li').get();
-
items.sort(function(a,b){
-
var keyA = $(a).text();
-
var keyB = $(b).text();
-
-
if (keyA <keyB) return -1;
-
if (keyA> keyB) return 1;
-
return 0;
-
});
-
var ul = $('.para_ordenar');
-
$.each(items, function(i, li){
-
ul.append(li);
-
});
Pasar parámetros a una función llamada con setTimeout:
-
timeout = setTimeout(function(){myFunction(param)},time);
Desactivar el botón derecho del mouse:
-
$(document).ready(function(){
-
$(document).bind("contextmenu",function(e){
-
return false;
-
});
-
});
Desvanecer una imagen y hacer aparecer otra en su reemplazo:
Usamos la variable "otroSource" que tiene que valer el src; 
-
$('imageelement').fadeOut(function() {
-
$(this).load(function() {
-
$(this).fadeIn();
-
}).attr('src', otroSource);
-
});
Crear tus propios selectores:
-
//extender jQuery
-
$.extend($.expr[':'], {
-
-
//nombre del selector personalizado
-
mayorQueMil : function (a){
-
//Matcheo del elemento
-
return parseInt($(a).html())> 1000;
-
}
-
});
-
-
$(document).ready(function() {
-
$('td:mayorQueMil').css('background-color', '#ff0000');
-
});
Correr 5 veces una función con intervalos de 20 segundos:
-
var count = 0;
-
function miFuncion() {
-
count++;
-
if(count> 5) clearInterval(timeout);
-
//hacer algo
-
}
-
var timeout = setInterval(miFuncion, 20000);
Checkear que existe un elemento:
-
if ($("#id-elemento").length) {
-
//existe!
-
}
Cancelar una petición por AJAX:
-
var req = $.ajax({
-
type: "POST",
-
url: "unaurl",
-
data: "id=1",
-
success: function(){
-
//hacer algo
-
}
-
});
-
//Cancelar la petición
-
req.abort()
Bueno, creo que serán muy útiles para cualquier tipo de proyecto en el que estén trabajando. En breve voy a postear una segunda parte con más snippets 
Fuente: Codrops
Mientras tanto... ¿Cuáles son los snippets que utilizas con más frecuencia?
Domingo, 10 de Enero de 2010 a las 15.03
Muy bueno!!!
Domingo, 10 de Enero de 2010 a las 22.15
Muy buena colección de snippets, se agradece!
Jueves, 14 de Enero de 2010 a las 15.46
Tengo una duda con el snippet de Hacer un refresh del atributo src de una imagen, exactamente que es ? osea que hace un refresh estilo f5 a sierta imagen usando el src ? algo asi como un efecto ajax que solo la imagen hace refresh pero el resto de la pagina no.
Jueves, 14 de Enero de 2010 a las 15.57
@kzok
Exactamente. Es muy utilizado, por ejemplo, en Captchas, donde seguramente el usuario viene de completar un formulario y no quieres que se pierda ningún dato.
Lunes, 25 de Enero de 2010 a las 20.14
sigo sin hacer funcionar el script de Hacer un refresh del atributo src de una imagen: no se que parametros cambiar o mas bien el funcionamiento >__< donde ponga la direccion de mi imagen?
Martes, 26 de Enero de 2010 a las 10.48
@kzok
Supongamos que tienes una carpeta con 100 imágenes para un captcha. En tu formulario se carga una de ellas. El usuario se da cuenta que no la puede leer correctamente y decide cliquear el botón de "mostrar otra imagen". Si no usamos javascript perderá los datos del formulario con el refresh de la página completa.
Para evitar el problema usamos JS, al dar clic al botón seteamos un handler que escuche ese clic, y llame a esta función que ejemplificamos en este artÃculo.
Esta función toma el objeto imagen (imageobj) que tienes que designar previamente. Luego genera un número aleatorio (ahà entra en juego el Math.random) que será la imagen aleatoria que se vaya a recargar en lugar de la otra, modificando el atributo src (tomándolo de la lista del objeto imagen).
¡Espero haber aclarado un poco la cuestión!