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)


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:

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

Chequear si una imagen fue cargada:

  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:

  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:

  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 ^_^):

  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.

  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:

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

Desactivar el botón derecho del mouse:

  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; 😉

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

Crear tus propios selectores:

  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:

  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:

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

Cancelar una petición por AJAX:

  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

Comentarios (9)

  1. Albert dice:

    Muy bueno!!!

  2. jonatan dice:

    Muy buena colección de snippets, se agradece!

  3. kzok dice:

    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:

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

    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:

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

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

  8. Diego Jimenez dice:

    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:

    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
Acceder