Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje07-01-2009, 21:42 (UTC)    
Título del mensaje: [Código Javascript] [Tutorial]Spry: Paneles tipo Acordéon

Hola! soy "F" con otro codigo Spry, y que como yo ya dije antes, tienen que colocar algo similar a esto:

Efecto javascript por Spry Microsoft

Para no violar los derechos de autor

Ahora se preguntaran "Paneles tipo acordéon??" con lo que me refiero acordéon me refiero a esto:

tenemos categorias y texto pero queremos que uno este abierto y otro cerrado(tipo spoiler) y que al hacer click en el otro cerrado, se abra y se cierre el otro. Sorprendente no?

Aquí va como hacerlo:

Coloquen este codigo en Texto por enzima de la pagina:

Cita:
<script src="http://img3.xooimage.com/files/8/d/5/spryaccordion10-9c53f7.js" type="text/javascript"></script>
<link href="http://img7.xooimage.com/files/f/9/1/spryaccordion10-9c7816.css" rel="stylesheet" type="text/css" />


P.S= si saven de CSS, descarguen el archivo del Link editenlo, y guardenlo como archivo .CSS, vuelvan a subirlo a un hosting y sustituyan la url del Link por la nueva.

Ahora vamos a la pagina que queremos colocar el panel de acordéon.
Y colocamos el siguiente codigo en modo HTML(SOLO MODIFIQUEN LO ROJO!):

Cita:
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Etiqueta 1</div>
<div class="AccordionPanelContent">Contenido 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Etiqueta 2</div>
<div class="AccordionPanelContent">Contenido 2</div>
</div>
</div>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</script>



Un ejemplo que usa este codigo: http://noticiaspwg.es.tl/


EDITO!=advertencia, los que usen este codigo, los paneles seran del tamaño del 100% de su contenedor(tabla o alguna otra cosa.) asi que no lo coloquen en texto por enzima de la pagina o en texto por debajo de la pagina(solo el segundo codigo que comente)


Ultima edición por noticiaspwg el Mie Ene 14, 2009 6:18 pm; editado 3 veces
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group