21Jul 2010 12 Comments */?>

7 códigos JQuery que todos deberían tener

Categorías: JQuery, Recursos - Tags: ,

Hoy les traigo un pequeño recopilatorio de JQuery code snippets que hacen la vida más fácil. Aunque para la mayoría de estos ejemplos existen extensos plugins que hacen lo mismo, con unas simples lineas de código podemos realizar lo mismo y a su vez aprendemos como funciona.

1. Texto que desaparece en cajas de búsquedas

Este ejemplo mostrará un texto en la caja de búsqueda que al hacer click para escribir desaparecerá . Y si nos vamos de la caja sin escribir nada volverá a aparecer.

1
2
3
4
5
6
7
jQuery(function(){
var texto="Buscar";
jQuery("#whats-new")
  .val(texto)
  .focus(function(){ jQuery(this).val('') })
  .blur(function(){ jQuery(this).val() === '' ? jQuery(this).val(texto) : null; });
});

2. Cambiar el tamaño de fuente en la página

Pequeño script que permite al usuario agrandar o achicar el tamaño de la fuente dependiendo en que botón haga click.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 $(function(){
 
// Resetear al tamaño original
 var originalFontSize = $('html').css('font-size');
 $(".resetFont").click(function(){
 $('html').css('font-size', originalFontSize);
 });
 // Aumentar tamaño
 $(".aumentar").click(function(){
 var currentFontSize = $('html').css('font-size');
 var currentFontSizeNum = parseFloat(currentFontSize, 10);
 var newFontSize = currentFontSizeNum*1.2;
 $('html').css('font-size', newFontSize);
 return false;
 });
 // Disminuir tamaño
 $(".disminuir").click(function(){
 var currentFontSize = $('html').css('font-size');
 var currentFontSizeNum = parseFloat(currentFontSize, 10);
 var newFontSize = currentFontSizeNum*0.8;
 $('html').css('font-size', newFontSize);
 return false;
 });
 })

3.Pasar variables de PHP $_GET and javascript

Con este código podremos pasar las variables $_GET de php a javascript para poder utilizarlas si es necesario

1
2
3
4
5
6
7
8
9
var searchArray = document.location.search.substring(1).split("&");
 //Removemos '?' y separamos las variables
 
//Ahora hacemos un loop en searchArray y creamos otro array llamado  GET
 var GET = [];
 for (searchTerm in searchArray){
 searchTerm.split("="); //Dividimos searchTerm en propiedades y valores
 GET[searchTerm[0]] = searchTerm[1]; //Añadimos la propiedad y el valor al array GET
 }

4. Refrescar parte de una Web mediante AJAX

Este código es extremadamente útil cuando queremos que una parte de nuestra web ( un widget por ej) se actualice constantemente.

1
2
3
4
5
$(document).ready(function() {
 setInterval(function() {
 $("#content").load(location.href+" #content > *","");
 }, 5000);
 });

5. Evitar conflictos entre librerías

JQuery incluye al igual que otras librerías el alias $ .Con este método podremos cambiar dicho alias por cualquiera que nos plazca.

1
2
3
4
 var $timersys = jQuery.noConflict();
 
//Ahora podemos usar $timersys en vez de '$'
 $timersys("div").hide();

6. Detectar el navegador

Sencilla forma de detectar los diferentes navegadores

1
2
3
4
5
6
7
8
9
 //A. Para Safari
 
if( $.browser.safari )
 
//B. Para cualquier versión inferior a IE7
 if ($.browser.msie && $.browser.version < 7 )
 
//C. Para IE7 y versiones anteriores
 if ($.browser.msie && $.browser.version = "1.8" )

7. Deshabilitar click derecho del mouse

No siempre queremos que puedan hacer click derecho en nuestra web.

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

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

  • Guillermo

    Muy buenas tardes

    Quería agradecerte tu colaboración de forma constante con la comunidad de internet

    La verdad, todo lo que pones es muy útil, gracias por compartirlo

    Comenzaré desde 0, ya que tienes mucho material y todo esplendido

    Un saludo y gracias gracias!

  • Pingback: Las mejores nuevas característicasy técnicas de HTML5 | Timersys()

  • muy buenos codigos la verdad, los usare en mi web 😛

  • Alexa

    por favor si me pueden ayudar necsito ingresar solo texto en un caja de texto en codigo Jquery,
    y entra caja de texto solo ingresar numeros en codigo jquery

  • Vicente

    Muchísimas gracias: Con la propuesta número 2 ya no probé pues la uno no funciona.
    Es un poco desesperante que busquemos información en la red y encontremos constantemente propuestas que no funcionan. Con lo cual perdemos un tiempo valioso, tanto el que lo escribe como el que cree en ello.
    En cambio, ésto, de mi cosecha sí funciona con todos los input que son de tipo texto
    $(document).ready(function() {
    $('input[type=text]').focus(function(){
    var campo = $(this);
    if(campo.val() == campo.attr('defaultValue')) {
    campo.val('');
    }
    }).blur(function(){
    var campo = $(this);
    if(campo.val() == '') {
    campo.val(campo.attr('defaultValue'));
    }
    });
    });

    • disculpa tenía mal el código. Ya lo actualize. El correcto es :
      jQuery(function(){
      var texto="TExto aqui";
      jQuery("#whats-new")
      .val(texto)
      .focus(function(){jQuery(this).val('')})
      .blur(function(){
      jQuery(this).val() === '' ? jQuery(this).val(texto) : null;
      });
      });

  • Joseph

    Hola, oye… como se le podria padar el tamaño dela pantalla al height del css ?

  • alberto

    excelente, gracias por el post !!

  • venus

    hola, disculpa como podria colocar mi pagina web dentro del facebook?

    • invitado

      o te refieres a crear una pagina en facebook

  • Ronald

    Porque esta funcion no cambia el valor de la n;

    var n = false; n = $.post(“DEMOPROYECTO/validarUsuario.php”, s, function(data){ if (data == 0){ $(“#validar”).text(“El usuario no existe”); return false; } else if(data == 2){ $(“#validar”).text(“Los campos son requeridos.”); return false; } else if(data == 1){   return true; } }); return n; }; alert(n);

    siempre muestra false 

  • williams

    Excelente ….