10+ códigos JQuery muy útiles

<p>A lo largo de los últimos años JQuery se transformó en una librería muy utilizada para el desarrollo web. Es fácil de utilizar y muy poderosa. En este artículo se recopilan 10+ códigos con JQuery que pueden ser copiados y utilizados en una variedad de proyectos comúnes. Pueden adaptarse fácilmente a tus necesidades.</p>

<h3>Suave scroll a lo más alto de la página</h3>

<p>Este código es muy popular. Con estas cuatro líneas de código permitiremos que el usuario pueda ir hasta lo más alto de la página haciendo click en un link ubicado al final de la página.</p>

<pre class="prettyprint"> $("a[href='#top']").click(function() { $("html, body").animate({ scrollTop: 0 }, "slow"); return false; });</pre>

<h2>Copiar la cabecera de una tabla en el pie de la tabla</h2>

<p>Para una mejor lectura de las tablas, puede ser una buena idea copiar la cabecera en el pie. De esta forma podemos ver los nombres de las columnas arriba y abajo.</p>

<pre class="prettyprint"> var $tfoot = $('<tfoot></tfoot>'); $($('thead').clone(true, true).children().get().reverse()).each(function(){ $tfoot.append($(this)); }); $tfoot.insertAfter('Cabecera);</pre>

<h2>Cargar contenido externo</h2>

<p>Con JQuery es muy sencillo cargar contenido externo en nuestra página. Por ejemplo podemos poner este contenido en un <div>. Aquí el código:</p>

<pre class="prettyprint"> $("#content").load("algun_archivo.html", function(response, status, xhr) { if(status == "error") { $("#content").html("Ha ocurrido un error!"); } });</pre>

<h2>Igualar el alto de las columnas</h2>

<p>Cuando usás columnas para mostrar el contenido en un sitio, definitivamente se vería mejor si las columnas tuvieran el mismo alto. El siguiente código tomará todos los elementos <div> con la clase .col y ajustará su alto de acuerdo a la columna más grande.</p>

<pre class="prettyprint"> var maximo = 0; $("div.col").each(function(){ if($(this).height() > maximo) { maximo = $(this).height(); } });

$("div.col").height(maximo);</pre>

<h2>Estilo zebra en las tablas</h2>

<p>Cuando se muestra contenido en una tabla, alternar el color de las filas aumenta la legibilidad. Con este código agregamos automáticamente una clase a una de cada dos filas.</p>

<pre class="prettyprint"> $(document).ready(function(){
$("table tr:even").addClass('fila_coloreada'); });</pre>

<h2>Actualizar parcialmente una página</h2>

<p>Si necesitamos actualizar solo una parte de la página podemos lograrlo con este código. En este ejemplo el div #refrescar automáticamente se actualizará cada 10 segundos.</p>

<pre class="prettyprint"> setInterval(function() { $("#refrescar").load(location.href+" #refrescar>*",""); }, 10000); // milisegundos</pre>

<h2>Precargar imágenes</h2>

<p>JQuery puede pre-cargar las imágenes silenciosamente mientras el usuario ve el resto de la página, de esta forma no tendrá que esperar eternamente a que se muestren. Para hacerlo funcionar solo hay que cambiarle la lista de imágenes en la octava línea!</p>

<pre class="prettyprint"> $.preloadImages = function() { for(var i = 0; i<arguments.length; i++) { $("<img />").attr("src", arguments[i]); } }

$(document).ready(function() { $.preloadImages("primera_imagen.jpg","segunda_imagen.jpg"); });</pre>

<h2>Abrir links externos en una nueva pestaña/ventana</h2>

<p>Con el atributo target="blank" podemos forzar los links a abrirse en nuevas ventanas. Aunque deseemos abrir links externos en otras ventanas puede ocurrir que no querramos hacer lo mismo con los links de nuestra propia página (links internos ). Con este código detectamos si un link es externo, y en este caso le agregamos el atributo target="blank".</p>

<pre class="prettyprint"> $('a').each(function() { var a = new RegExp('/' + window.location.host + '/'); if(!a.test(this.href)) { $(this).click(function(event) { event.preventDefault(); event.stopPropagation(); window.open(this.href, '_blank'); }); } });</pre>

<h2>Ancho/Alto total de un div</h2>

<p>Este código nos permite crear un div con un ancho/alto total de acuerdo al viewport. Este código también maneja cambios de tamaño de la ventana.</p>

<pre class="prettyprint"> // global vars var ancho_minimo = $(window).width(); var alto_minimo = $(window).height();

// establecer alto/ancho inicial en el div $('div').css({ 'width': ancho_minimo, 'height': alto_minimo, });

// asegurarnos de que el tamaño se mantendrá cuando // se cambie el tamaño de la ventana $(window).resize(function(){ $('div').css({ 'width': ancho_minimo, 'height': alto_minimo }); });</pre>

<h2>Comprobar dificultad de una contraseña</h2>

<p>Cuando dejás que los usuarios de tu página elijan su contraseña, es una buena idea indicar que tan difícil es estra contraseña elegida. Esto es lo que podemos lograr con este ejemplo.</p>

<p>Primero supongamos que tenemos el siguiente HTML:</p>

<pre class="prettyprint"> <input type="password" name="clave" id="clave" /> <span id="dificultad"></span></pre>

<p>Ahora con JQuery evaluamos completamente la contraseña usando expresiones regulares y un mensaje se le mostrará al usuario informándole si la dificultad de la contraseña que eligió es difícil, media o débil.</p>

<pre class="prettyprint"> $('#clave').keyup(function(e) { var dificilRegex = new RegExp("^(?=.{8,})(?=.[A-Z])(?=.[a-z])(?=.[0-9])(?=.\W).$", "g"); var medioRegex = new RegExp("^(?=.{7,})(((?=.[A-Z])(?=.[a-z]))|((?=.[A-Z])(?=.[0-9]))|((?=.[a-z])(?=.[0-9]))).$", "g"); var suficienteRegex = new RegExp("(?=.{6,}).*", "g"); if (false == suficienteRegex.test($(this).val())) { $('#dificultad').html('Utiliza más caracteres'); } else if (dificilRegex.test($(this).val())) { $('#dificultad').className = 'ok'; $('#dificultad').html('Difícil!'); } else if (medioRegex.test($(this).val())) { $('#dificultad').className = 'alerta'; $('#dificultad').html('Dificultad media!'); } else { $('#dificultad').className = 'error'; $('#dificultad').html('Débil!'); } return true; });</pre>

<h2>Cambiar el tamaño de una imagen con JQuery</h2>

<p>Aunque puedas redimensionar una imagen en el servior ( con PHP por ejemplo ) puede ser útil hacerlo con JQuery. Aquí hay un código para ello:</p>

<pre class="prettyprint"> $(window).bind("load", function() { // Redimensionar imagen $('#lista_de_imagenes img').each(function() { var ancho_maximo = 120; var alto_maximo = 120; var proporcion = 0; var ancho = $(this).width(); var alto = $(this).height();

    if(ancho > ancho_maximo){
        proporcion = ancho_maximo / ancho;
        $(this).css("width", ancho_maximo);
        $(this).css("height", alto * proporcion);
        height = alto * proporcion;
    }
    var ancho = $(this).width();
    var alto = $(this).height();
    if(alto > alto_maximo){
        proporcion = alto_maximo / alto;
        $(this).css("height", alto_maximo );
        $(this).css("width", ancho * proporcion);
        ancho = ancho * proporcion;
    }
});

});</pre>

<h2>Cargar contenido automáticamente al hacer scroll</h2>

<p>Algunas páginas como Twitter cargar el contenido a medida que vamos bajando. Esto quiere decir que el contenido es cargado de manera dinámica en una sola página a medida que hacemos scroll hacia abajo.</p>

<p>Aquí un código con el que podemos copiar ese efecto en nuestro sitio web:</p>

<pre class="prettyprint"> var cargando = false; $(window).scroll(function(){ if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){ if(cargando == false){ cargando = true; $('#imagen_cargando').css("display","block"); $.get("cargar.php?inicio="+$('#cargado').val(), function(cargado){ $('body').append(cargado); $('#cargado').val(parseInt($('#cargado').val())+50); $('#imagen_cargando').css("display","none"); cargando = false; }); } } });

$(document).ready(function() { $('#cargado').val(50); });</pre>

<h2>Verificar si una imagen fue cargada</h2>

<p>Aquí un código que podemos utilizar cuando trabajamos con imágenes, ya que es la mejor forma de comprobar si una imagen ha sido cargada o no:</p>

<pre class="prettyprint"> var imagen_url = 'img/imagen.png'; $('<img/>').load(function () { alert('Imagen cargada'); }).error(function () { alert('Error cargando la imagen'); }).attr('src', imagen_url );</pre>

<h2>Ordenar una lista de manera alfabética</h2>

<p>En algunos casos puede ser útil ordenar una lista de manera alfabética. Este código toma cualquier lista y la ordena alfabeticamente.</p>

<pre class="prettyprint"> $(function() { $.fn.ordenarLista = function() { var lista = $(this); var lista_items = $('li', lista).get(); lista_items.sort(function(a, b) { var compA = $(a).text().toUpperCase(); var compB = $(b).text().toUpperCase(); return (compA < compB) ? -1 : 1; }); $.each(lista_items, function(i, item) { lista.append(item); }); } $("ul#demostracion").ordenarLista(); });</pre>

<p> </p>

<p><strong>Bueno, espero que les haya gustado! Acepto comentarios d:</strong></p>

html javascript jquery