Juan Manuel 10 de Enero de 2010 a las 11.00
   Imprimir artículo
elWebmaster.com

Snippets de Javascript y jQuery para ahorrar tiempo (Parte 1)

Programaci贸n, AJAX, desarrollo, c贸digo, javascript, e-mail, jQuery, snippet, frontend, setTimeout

javascript_125x125Somos 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:

PLAIN TEXT
  1. $(imageobj).attr('src', $(imageobj)
  2.            .attr('src') + '?' + Math.random() );

Chequear si una imagen fue cargada:

PLAIN TEXT
  1. var imgsrc = 'img/image1.png';
  2. $('<img/>').load(function () {
  3.     alert('La imagen se carg贸');
  4. }).error(function () {
  5.     alert('Error al cargar la imagen');
  6. }).attr('src', imgsrc);

Chequear si un set de im谩genes se carg贸:

Para este ejemplo, chequearemos si 10 im谩genes fueron cargadas correctamente:

PLAIN TEXT
  1. var totalImagenes  = 10;
  2. var imagenesCargadas = 0;
  3. $("<img/>").load(function() {
  4.     ++imagenesCargadas;
  5.     if(imagenesCargadas == totalImagenes){
  6.         //Las 10 im谩genes fueron cargadas
  7.     }
  8. });

Remover un texto seleccionado luego de hacer doble clic con el mouse:

PLAIN TEXT
  1. clearSelection      : function () {
  2.     if(document.selection && document.selection.empty) {
  3.         document.selection.empty();
  4.     } else if(window.getSelection) {
  5.         var sel = window.getSelection();
  6.         sel.removeAllRanges();
  7.     }
  8. }
  9. $(element).bind('dblclick',function(event){
  10.     //hacer algo
  11.     clearSelection();
  12. });

Validar direcci贸n de e-mail (l铆nea ofuscad铆sima ^_^):

PLAIN TEXT
  1. var email = 'info@tympanus.net' //Obviamente esta variable la tomaremos de un form o algo as铆 ^_^
  2. 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)))
  3. alert('e-mail inv谩lido');

Ordenar 铆tems de una lista:

N贸tese que usamos la clase "para_ordenar" en la lista.

PLAIN TEXT
  1. <ul>
  2. <li>P茅rez</li>
  3. <li>G贸mez</li>
  4. <li>脕lvarez</li>
  5. <li>Mart铆nez</li>
  6. </ul>
  7.  
  8. var items = $('.para_ordenar li').get();
  9. items.sort(function(a,b){
  10.     var keyA = $(a).text();
  11.     var keyB = $(b).text();
  12.  
  13.     if (keyA <keyB) return -1;
  14.     if (keyA> keyB) return 1;
  15.     return 0;
  16. });
  17. var ul = $('.para_ordenar');
  18. $.each(items, function(i, li){
  19.     ul.append(li);
  20. });

Pasar par谩metros a una funci贸n llamada con setTimeout:

PLAIN TEXT
  1. timeout = setTimeout(function(){myFunction(param)},time);

Desactivar el bot贸n derecho del mouse:

PLAIN TEXT
  1. $(document).ready(function(){
  2.     $(document).bind("contextmenu",function(e){
  3.         return false;
  4.     });
  5. });

Desvanecer una imagen y hacer aparecer otra en su reemplazo:

Usamos la variable "otroSource" que tiene que valer el src; ;)

PLAIN TEXT
  1. $('imageelement').fadeOut(function() {
  2.     $(this).load(function() {
  3.         $(this).fadeIn();
  4.     }).attr('src', otroSource);
  5. });

Crear tus propios selectores:

PLAIN TEXT
  1. //extender jQuery
  2. $.extend($.expr[':'], {
  3.  
  4.     //nombre del selector personalizado
  5.     mayorQueMil : function (a){
  6.         //Matcheo del elemento
  7.         return parseInt($(a).html())> 1000;
  8.     }
  9. });
  10.  
  11. $(document).ready(function() {
  12.     $('td:mayorQueMil').css('background-color', '#ff0000');
  13. });

Correr 5 veces una funci贸n con intervalos de 20 segundos:

PLAIN TEXT
  1. var count = 0;
  2. function miFuncion() {
  3.     count++;
  4.     if(count> 5) clearInterval(timeout);
  5.     //hacer algo
  6. }
  7. var timeout = setInterval(miFuncion, 20000);

Checkear que existe un elemento:

PLAIN TEXT
  1. if ($("#id-elemento").length) {
  2.     //existe! :P
  3. }

Cancelar una petici贸n por AJAX:

PLAIN TEXT
  1. var req = $.ajax({
  2. type:     "POST",
  3. url:     "unaurl",
  4. data:     "id=1",
  5. success: function(){
  6. //hacer algo
  7. }
  8. });
  9. //Cancelar la petici贸n
  10. 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?


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Artículos relacionados

Comentarios (9)

  1. Albert dice:
    Domingo, 10 de Enero de 2010 a las 15.03

    Muy bueno!!!

  2. jonatan dice:
    Domingo, 10 de Enero de 2010 a las 22.15

    Muy buena colecci贸n de snippets, se agradece!

  3. kzok dice:
    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.

  4. Juan Manuel dice:
    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. ;)

  5. kzok dice:
    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?

  6. Juan Manuel dice:
    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! ;)

  7. Orson dice:
    Mi茅rcoles, 24 de Marzo de 2010 a las 12.47

    and the source of this snippets is..
    http://tympanus.net/codrops/2010/01/05/some-useful-javascript-jquery-snippets/

  8. Diego Jimenez dice:
    S谩bado, 1 de Mayo de 2010 a las 14.49

    Muy buenas todas las ayudas que publicas , excelente pagina! , si te interesa intercambiar links con el foro me devuelve el mensaje porfavor.

    Saludos!

  9. Copy&Paste dice:
    Lunes, 7 de Noviembre de 2011 a las 16.57

    Burdo Copy & Paste de http://tympanus.net/codrops/2010/01/05/some-useful-javascript-jquery-snippets/ ....

    Adem谩s, cuando dices "Validar direcci贸n de e-mail (l铆nea ofuscad铆sima ^_^):" solo est谩s demostrando que ni siquiera sabes de que hablas cuando confundes una expresi贸n regular con un c贸digo ofuscado.... en fin copy & paste de toda la vida

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesi贸n