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