Los Widgets de Spry: El elemento Accordion
16 de septiembre de 2006 Autor: Andres Cayon Archivado en Spry, TutorialesMétodos extra:
Hasta ahora hemos visto cómo crear el elemento y cómo, utilizando estilos CSS, podemos modificar la apariencia dinámica del mismo . Sin embargo, sus funcionalidades no terminan ahí: Spry proporciona una serie de métodos JavaScript que nos permiten manipular nuestro Acordeón. En caso de que vayamos a ahacer uso de ellos, es importante que nuestro elemento utilice bloques div y no listas. Algunos de estos métodos son:
- openFirstPanel(): Abre el primer panel
- openLastPanel(): Abre el último Panel
- openPreviousPanel(): Abre el panel anerior
- openNextPanel: Abre el panel siguiente
- addNewPanel(“label”, “contenido”): Permite crear un nuevo panel
Omitiremos cometar las 4 primeras, ya que su uso es bastante obvio. Respecto a la quinta, sólamente es necesario definir como primer parámetro el texto de la pestaña y como segundo, el contenido.
El ejemplo 3 extiende el anterior, añadiendo botones que permiten navegar por las pestañas y la posibilidad de crear otras nuevas.
NOTA: A la hora de escribir este artículo (Spry Beta 1.3), el método addNewPanel es provisional y sufre un bug que impide su uso. Por ello hemos reemplazado el método existente por otro que hemos creado y que es completamente funcional. Futuras versiones del framework ampliarán está función.
Hasta aquí sólo algunas de las posibilidades que ofrece este primer widget de Spry. A medida que avancen las versiones iremos avanzando en el conocimieno de este excelente y sencillo framework para AJAX de Adobe
Buenos dÃas, mi pregunta es si se puede poner un menú de acordeon en una plantilla en Dreamweaver 8.
Si: Sólamente hay que revisar que en los documentos creados a partir de la plantilla, la url al archivo js sea la correcta (aunque Dreamweaver no suele tener problemas al escribirla, conviene asegurarse).
Tras eso, y aparte de escribir la lÃnea que invoca al accordion, no es necesario realizar ninguna otra acción.
Hola Andrés, te comento a ver si tu me puedes ayudar. Tengo una plantilla.dwt.php, le he insertado este menú, en vista previa en explorador funciona bien en IE y en Firefox pero si le aplico la plantilla a las páginas solamente me funcionan en Firefox, en IE se ve el menu totalmente desplegado y en la barra de estado me pone que queda un elemento por descargar que no lo carga nunca. Sabes tú que hago mal
SerÃa interesante verlo en vivo o al menos alguno de los archivos generados a partir de la plantilla…
Puedes ponerte en contacto conmigo a traves de email (andres-arroba-dwug-punto-es) y enviarme una url o un archivo de ejemplo con el problema?
Hola Andres, gracias por tu ayuda. Soy novata, y acabo de hacer un spry acordeon, pero no veo, como puedo cambiar que aparezcan todos los menus cerrados, el primero de ellos me aparece abierto, hasta q le clico al siguiente…. o sea, me gustarÃa que empezara y acabara cerrado, a modo de lista, me puedes decir que tengo q modificar, muchas gracias.
Se consigue añadiendo parametros al accordeon: altura de los paneles no fija (se adaptan al contenido y pasar -1 como panel por defecto:
var acc1 = new Spry.Widget.Accordion(“Acc1″, { useFixedPanelHeights: false, defaultPanel: -1 });
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#AllPanelsClosed
Hola amigos.
Quisiera saber como hago para pasarle parà metros de una base de datos a un elemento acordeon utilizando un div, me explico:
Tengo un menu de selecciòn en el cual existen diferentes nombres.
Al hacer click sobre uno de estos nombre debe traer los datos de la base de datos y mostrarlos en el acordeon utilizando el objeto ajax.
Resulta que trae los datos pero el acordeon no funciona.
Cual es el error, agradecerìa su ayuda.
Hola Ramiro:
Algo más de información:
Los datos, ¿En qué parte del acordeón se muestran? ¿dentro de un panel o recarga toda las estructura de los paneles?
¿Por qué sabes que trae los datos?
¿Has indicado que el contenido dentro del panel (si es el caso) es una región detalle de Spry?
Hola Andres.
Nuevamente te anexo el codigo PHP que tengo en el archvio index.php, pues veo que esta incompleto y como es la primera vez que utilizo este medio para pedir ayuda no se si es que no puedo pasar codigo PHP.
”
Rico.loadModule(‘Accordion’);
body {font-family: Arial, Tahoma, Verdana;}
p.top { clear:both;margin:0px; }
.top { font-size:smaller; }
table#compat thead tr { background-color:#DDD; }
table#compat td { text-align:center; }
table#compat tr { vertical-align:bottom; }
#accordion1 {
border : 1px solid #4f4f4f;
width: 600px;
margin-top:6px;
}
div.selected, div.hover {
background-color:#63699C;
color:#FFFFFF;
font-weight:bold;
height: 22px;
padding-left: 5px;
}
.accordionTabTitleBar
{
background-color:#6B79A5;
color:#CED7EF;
height: 22px;
font-weight : ‘normal’;
padding-left: 5px;
padding-top: 5px;
border-bottom:1px solid #182052;
border-style:solid none;
border-top:1px solid #BDC7E7;
border-width:1px 0px;
font-size:12px;
}
.accordionTabContentBox {
font-size: 11px;
padding-left: 5px;
overflow: auto;
}
)” value=”">
“
Hola Andres.
Que pena contigo pero veo que no pasa todo el còdigo.
Por favor regalame un correo al cual te pueda enviar el codigo fuente.
Mil gracias.
HOLA AMIGOS, SOY NUEVO EN ESTO DE LOS DISEÑOS DE PAGINA, ESTOY USANDO ACORDEON SPRY PERO Y CUANDO LO LLEVO A LA PRESENTACION TODO PARECE ESTAR EN ORDEN, CUANDO LOS SUBO A LA WEBS Y LOS VISUALIZO, NO FUNCIONAN, QUEDAN LAS PESTAÑAS TODAS ABIERTAS, NO SE QUE ME HACE FALTA SUBIR O QUE DEBO CONFIGURAR, SUBI TODO LO QUE SE GENERA EN LA PAGINA Y AUN ASI, NO LOGRO CORREGIR ESE DETALLE, ESPERO ALGUIEN PUEDA COMENTARME AL RESPECTO, MUCHAS GRACIAS
Hola… he insertado en mi pagina un boton de los tipo flash que trae el dreamqeaver 8, y por nada del mundo he conseguido que en vez de llamar a una nueva pagina (al hacer click sobre el), me ejecute una funcion echa en javascript que forma parte de la misma pagina, donde hago unas evaluaciones previas para luego invocar el submit() del formulario.
Si pudiera ayudarme alguien, estaria altamente agradecido, de antemano gracias…
Peden enviarme su respuesta a mi correo.
Que tal.
estoy diseñando un sitio web, y al actualizarme a DW CS3, quise utilizar los Sprys para generar mas dinamismo a la pagina. Sin embargo al utilizar el acordeon y los paneles en ficha; ESTOS NO FUNCIONAN CORRECTAMENTE una vez subidos al servidor. Logicamente funcionan perfecto cuando se realiza la visualizacion desde Dreamweaver. Realice la actualizacion del spry a la version 1.6, pero aun asi no me funcionan cuando subo los archivos al servidor. Ojala puedan colaborarme. Muchas gracias.
Hola Cesar: Existe alguna url donde se pueda ver el problema?
Puedes utilizar mi correo andres-arroba-dwug-punto-es
Hola,
Tengo un pequeño problema con las TabbedPanels si inserto una imagen en la segunda pestaña al abrir con el ie no se ve en cambio en el firefox se ve perfecto.
¿Que puedo hacer para que se vea también en el ie? (imagino que tiene que ser algo de la css).
Gracias
Ampliando el punto 6, para que el acordeón aparezca cerrado es simple, abre el SpryAccordion. js y en la lÃnea 37 cambia el this.defaultPanel a -1 y en la lÃnea 51 en el this.useFixedPanelHeights cambia el valor a false. Eso es todo.
Gracias Pepe por su pequeña aportación.
Además de que ya he solucionado como hacer que aparezca todo cerrado, he solucionado de rebote que no todos tienen porque salir del mismo tamaño.
Perfecto!
Una vez más, GRACIAS.
Otra posibilidad es pasar las opciones al crear el acordeón y no tener que cambiar el js:
Si no queremos que se abra y que cada panel tenga diferente altura el constructor podrÃa ser:
var acordeon = new Spry.Widget.Accordion(“miAcordeon”,{useFixedPanelHeights:false, defaultPanel:-1});
Hola buenas a todos, hace poco que hice un curso por el inem de diseño web con dreamweaber. El caso es que creo un menu spry en acordeon, cuando lo veo en local, funciona correctamente pero cuando lo subo al servidor, todos los paneles aparecen desplegados, he revisado todo y aparentemente esta bien, me imagino, es lo que genera el dreamweaber pero al subirlo, al menos con el explorer no funciona como debiera, necesito una ayudita.
Hola Miguel:
Has subido los archivos javascript (carpeta spryAssets) al servidor?
Ya sabemos cómo “desbloquear” las alturas de los paneles y cómo hacer que no se abra ninguna ficha, pero me interesarÃa ir un poco más lejos.
Cómo hacer que al hacer clik en un enlace, permanezca abierta esa ficha en la nueva página que se abre?
Mil gracias por tu dedicación. Es de gran ayuda.
La parte que decide qué panel debe quedar abierta dependerá del lenguaje de servidor utilizado. En la parte relativa a Spry, se puede definir el panel que queda abierto por defecto en las opciones del constructor mediante defaultPanel:
var acc8 = new Spry.Widget.Accordion(“Accordion1″, { defaultPanel: 2 });
Es importante recordar que el contador empieza en cero, por lo que el ejemplo anterior abrirÃa por defecto el tercer panel.
Hola ,
Diseñe unos paneles que muestran una consulta de datos con el elemento spry Accordion de dreamweaver , estoy usando CS3, el tema es que funcionan de 10 en Firefox y otros navegadores, pero no logro hacerlo funcionar en IE, me quedan todos abiertos, se pierde el efecto de desplegar los paneles.
Si alguien me puede dar alguna idea de que puede ser, les estaria muy agradecida.
Maria:
Si utilizas CS3, es probable que estés utilizando una versión antigua de la librerÃa (comprueba en los archivos js el número de versión, pero me parece que CS3 incluida la 1.4). Puedes bajarte la versión más actual (1.6) desde esta dirección:
http://labs.adobe.com/technologies/spry/home.html
También puedes encontrar una extensión para DW que actualiza la librerÃa a la nueva versión y permite comprobar si hay nuevas versiones disponibles. Es realmente útil:
http://www.macromedia.com/go/labs_spry_download
(requiere tener un AdobeID)
Hola Andres, En CS3 me esta dando algo de lata tratode poner en una pagina un menu de acrodio y un menu de barra pero mueve el focus de posicion del menu de barra, sabes por que??
Hola Eduardo:
Sin una URL donde poder ver el problema lo tengo complicado :D
Tengo el mismo problema de loa Navegadores… se ve exelente en Firefox y Opera… pero en IE no toma la funcion de desplegar.. ayuda plx
@Daniel:
Comprueba la versión de Spry que utilizas (aparece al comienzo del archvo js). Si es una 1.4, actualizar a 1.6 soluciona el problema.
Existe una extensión que permite realizar las actualizaciones de forma automática:
En http://labs.adobe.com/technologies/spry/ pulsa en el enlace “Get the Spry Updater for Dreamweaver CS3/CS4 now” (es necesaria una AdobeID)
Hola, tengo un problema. Ya logré que el spray aparezca cerrado, pero cuando abro uno, para cerrarlo tengo que hacer click en el siguiente.
Me gustarÃa poder cerrarlo haciéndole click al mismo, de modo que pueda volver a cerrar todos.
Para que empiece cerrado modifiqué el SpryAccordion. js como explica el punto 16.
Me pueden ayudar?
muchas gracias.
Julio:
Si usas la opción useFixedPanelHeights:false tal y como indica Pepe en el comentario #16, los paneles se abren/cierran al pulsar sobre ellos sin necesidad de modificar el código.
mmm….., estuve mirando eso y no encontré uno que sea igual. El mas parecido es este:var Accordion2 = new Spry.Widget.Accordion(“Accordion2″);
Ya probé de cambiar un montón de cosas y no funciona, mi página es http://www.julioymirabai.com/events.htm
Si querés puedo mandarte un mail con el código, lo revisé linea por linea y no lo encuentro. Donde deberÃa estar eso?
Mi mail es juliomarino20@hotmail.com
Muchas gracias
Tengo un acordeon e hice lo que refieren en el comentario # 16 para que inicien todos los paneles cerrados, pero luego de abrir un panel, si quiero cerrarlo nuevamente no puedo hacerlo, debo agregar algun otro cambio? a alguien le a pasado esto?
Trabajo en CS3.
Saludos, estoy tratando de mostrar un acordion en un div, a traves de ajax, este se ve bien en firefox, pero no en IE8.
Parte del javascript que pienso que esta el problema es este
String.prototype.extractScript = function()
{
var matchAll = new RegExp(tagScript, ‘img’);
return (this.match(matchAll) || []);
Les agradecería mucho, tengo una semana ya he probado todo.
Tengo un pequeño problema…
al final de mi código pongo esto:
como dice la pag:
Pero cuando entro al sitio no se cierra cuando hago click en el panel abierto… ¿Alguna idea de alguien?
He recibido tu archivo: Estabas utilizando Spry 1.4… Se soluciona actualizando a 1.6