Juan Manuel 11 de enero de 2010 a las 11.00
   Imprimir artículo
elWebmaster.com

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


javascript_125x125Si te sirvieron los snippets de javascript y jQuery que posteé anteriormente, aquí tienes una segunda entrega para ahorrar tiempo en tus desarrollos en el frontend.

Esta vez con snippets para chequear cookies, tildar/destildar varios checkboxes, validar una fecha de nacimiento, centrar elementos en la pantalla, obtener urls y saber si el usuario presiona una tecla en especial.

Chequear si las cookies están activadas:

  1. $(document).ready(function() {
  2.     var dt = new Date();
  3.     dt.setSeconds(dt.getSeconds() + 60);
  4.     document.cookie = "cookietest=1; expires=" + dt.toGMTString();
  5.     var cookiesActivadas = document.cookie.indexOf("cookietest=") != -1;
  6.     if(!cookiesActivadas){
  7.         //las cookies no están activadas
  8.     }
  9. });

Tildar/destildar una serie de checkboxes:

  1. var tog = false; // o true si vienen con tildadas por default
  2. $('a').click(function() {
  3.     $("input[type=checkbox]").attr("checked",!tog);
  4.     tog = !tog;
  5. });

Obtener el índice de un elemento:

  1. $("ul > li").click(function () {
  2.     var index = $(this).prevAll().length;
  3. });

Validar fecha de nacimiento:

  1. $("#lda-form").submit(function(){
  2.     var dia = $("#dia").val();
  3.     var mes = $("#mes").val();
  4.     var anio = $("#anio").val();
  5.     var edad = 18;
  6.     var miFecha = new Date();
  7.     miFecha.setFullYear(anio, mes-1, dia);
  8.  
  9.     var fechaActual = new Date();
  10.     fechaActual.setFullYear(fechaActual.getFullYear() - edad);
  11.     if ((fechaActual - miFecha) < 0){
  12.         alert("Disculpa, sólo personas de más de " + edad + " pueden ingresar a este sitio.");
  13.         return false;
  14.     }
  15.     return true;
  16. });
  17. [/js]
  18.  
  19. <h2>Chequear si un elemento es visible:</h2>
  20.  
  21. [js]
  22. if($(element).is(":visible") == "true") {
  23.     //El elemento es visible
  24. }

Contar los hijos de un elemento:

  1. <div id="foo">
  2. <div id="bar"></div>
  3. <div id="baz">
  4. <div id="biz">
  5. </div>
  6. <span><span>
  7. </div>
  8.  
  9. //codigo jQuery para contar elementos hijos
  10. $("#foo > div").length

Centrar un elemento en la pantalla:

  1. jQuery.fn.center = function () {
  2.     this.css("position","absolute");
  3.     this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
  4.     this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
  5.     return this;
  6. }
  7.  
  8. //Usar la función así:
  9. $(element).center();

Mover las opciones de una lista A a una lista B:

  1. $().ready(function() {
  2.     $('#add').click(function() {
  3.         !$('#select1 option:selected').appendTo('#select2');
  4.     });
  5.     $('#remove').click(function() {
  6.         !$('#select2 option:selected').appendTo('#select1');
  7.     });
  8. });

Seleccionar todos los checkboxes de una sola vez:

  1. $(document).ready(function(){
  2.     $("#checkboxall").change(function(){
  3.         var checked_status = this.checked;
  4.         $("input[name=checkall]").attr("checked", checked_status);
  5.     });
  6.  
  7. });

Obtener la url actual:

  1. $(document).ready(function() {
  2.     var pathname = window.location.pathname;
  3. });

Saber si se presionó una tecla y cuál:

  1. $(function() {
  2.     $(document).keypress(function(e){
  3.         switch(e.which){
  4.         // "ENTER"
  5.         case 13:
  6.         alert('Se presionó Enter');
  7.         break;
  8.  
  9.         // "s"
  10.         case 115:
  11.         alert('Se presionó S');
  12.         break;
  13.  
  14.         //(etc...)
  15.  
  16.         }
  17.     });
  18.  
  19. });

¿Conoces alguna forma mejor de llevar a cabo alguna de las tareas de estos snippets? ¡Compártela con nosotros!

Fuente: Codrop


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

Comentarios (7)

  1. kzok dice:

    El ultimo codigo “Saber si se presionó una tecla y cuál:” no funciona como un keylogeer? es mi pregunta.

  2. Roy dice:

    Que pena das estos mismos artículos los sacas de http://tympanus.net/codrops/ que acaso no puedes generar tu propio contenido y tienes que copiarlo a los demás??

  3. Juanma dice:

    @Roy

    ¿Acaso no has visto que se cita la fuente al pie del artículo?

    Por otra parte, para los que quieran aprender pero no entiendan inglés, he TRADUCIDO todos los comentarios del código y he usado VARIABLES EN ESPAÑOL.

    Eso lleva mucho trabajo y, si a tí no te ha sido de utilidad, a muchos otros estoy seguro que sí.

    Lo que da pena es que hayas tomado una postura tan agresiva. Espero que mi respuesta te haga recapacitar.

    Te envío saludos.

  4. Juanma dice:

    @kzok

    Pues se puede utilizar con ese fin… pero habría que guardar la info registrada en algún lado, ya sea en una cookie o por backend, ya en un mail, db, etc…

    La aplicación más común son las webapps que te permiten controlarlas con el teclado (ej: usar photoshop online, donde podemos teclear “V” para seleccionar la herramienta “Mover”).

    Cualquier otra duda vuelve a preguntar =)

  5. Fernando Zamudio dice:

    hola me parece genial estos snippets, pero me gustaria saber como hacer para postear codigo como tu has echo, sin que pierda formato ni nada.

  6. Alejandra dice:

    Usamos un plugin para WordPress que se llama iG:Syntax Hiliter
    Este plugin permite pegar directamente el código que quieras, aunque tiene algunas limitaciones.

  7. eveevans dice:

    Varios de esos scripts estan mal u___u ….

    ejemplo:
    if($(element).is(“:visible”) == “true”) {
    //El elemento es visible
    }

    simplemente deberia ser
    if($(element).is(“:visible”))

    o

    if($(“element:visible”))

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