Juan Manuel 20 de mayo de 2008 a las 16.26
   Imprimir artículo
elWebmaster.com

Paneles que desaparecen con jQuery


Paneles que desaparecen con jQueryEl conocido efecto de iGoogle, donde podemos eliminar paneles a nuestro gusto, es algo muy sofisticado que le da mayor control al usuario sobre qu茅 le interesa y qu茅 no de nuestro sitio web, blog o aplicaci贸n online, o borrar las noticias que ya ha leido, etc.

Este efecto se logra con un poco de c贸digo por medio de jQuery. As铆 podemos incluirlo en nuestro sitio para volverlo m谩s din谩mico y tambi茅n m谩s efectivo a la hora de hacer sentir c贸modos a nuestros usuarios. Ent茅rate c贸mo hacerlo.

C贸mo usar jQuery y Javascript para crear paneles eliminables

  1. Lo primero es, por supuesto, contar con jQuery (haz clic aqu铆).
  2. Luego deber铆as crear un bot贸n donde el usuario pueda hacer clic para cerrar el panel.
    img
  3. Dentro del head hacemos el llamado con el siguiente script:
    <script type="text/javascript" src="jquery.js"></script>
  4. Luego agregamos la funci贸n que usa la librer铆a y le dice que al cliquear el elemento con clase “eliminar” (en este caso el bot贸n) desaparezca el elemento con clase “contenedor” (en este caso el div del mensaje).
    <script type="text/javascript">
    $(document).ready(function(){
    
    	$(".contenedor .eliminar").click(function(){
    		$(this).parents(".contenedor").animate({ opacity: 'hide' }, "slow");
    	});
    
    });
    </script>
  5. Ahora s贸lo resta usar las clases de este script dentro de la estructura (HTML).
    <div class="contenedor">
    	<h2>Lorem ipsum 1</h2>
    	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    	sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    	Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    	nisi ut aliquip ex ea commodo consequat. </p>
    	<p><a href="">Regresar al tutorial</a></p>
    	<img src="eliminar.png" alt="cerrar" class="eliminar" />
    </div>
  6. Luego podemos darle estilo a la clase (el contenedor) y tambi茅n al bot贸n.
    .contenedor {
    	margin:20px auto;
    	background:#F5E38E;
    	border:2px solid #EBCA4F;
    	padding:10px;
    	width:500px;
    	position:relative;
    }
    .contenedor .eliminar {
    	position: absolute;
    	top: 10px;
    	right: 10px;
    	cursor: pointer;
    }
    h2 { color:#ff0000; font-size:15px; }
    p { font-size:11px; padding: 0 0 11px; color:#333; }
    a { color:#ff8400; }
    body { font-family:verdana, arial; }

Las posibilidades son infinitas, no dudes en experimentar con otras combinaciones.

Paneles que desaparecen con jQuery
Haz clic aqu铆 para ver un ejemplo.

Fuente: Blogandweb


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

Comentarios (3)

  1. Leandro Javier Aude dice:

    Util y novedoso,como siempre.Podrian tener algunos sitios una aplicacion para hacerlos desaparecer del todo

  2. Diegoogle dice:

    Holass !!!..sabes que segui el ejemplo y me ha resultado fantastico, incluso lo mezcle con la api interface que hace q se pueda o no ordenar las ventanas en la pagina, algo asi como ordenar los bloquees como igoogle, ahora mi pregunta es la siguiente, interface provee de una funcion que me permite ver el orden de estas ventanas, en jquery como puedo ver que realmente existan desplegadas estas ventanas??…que no las haya cerrado con el ejemplo que propones??….segiure de todas formas investigando y realizando priebsa y si llego a saber algo….te posteo again ..pero si sabes…ahi me comentas 馃榾

    Saludos !!…
    Y gracias por el ejemplo !..me ha servido mucho !!!

  3. Diegoogle dice:

    Ya, encontre una solucion xD era tan simple como poner el metodo remove 馃榾

    ej:
    $(‘a.cerrar’).click(function(){
    $(this).parents(“.groupItem”).hide(“fast”);
    $(this).parents(“.groupItem”).remove();
    return false;
    };

    Ahi se desaparece el div del ‘array’ que tiene los elementos del momento 馃榾

    Al hacer
    serial = serial = jQuery.SortSerialize(s);
    alert(serial.hash);
    se obtiene con los divs que se ven 馃榾
    con eso despues se puede enviar a un php que procece
    el contenido que llegar por post o get, como quieran 馃榾
    usando .ajax 馃榾

    Eso pues..

    Un abrazo.

    Salu2 !

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