ayuda con menu acordeon

carMong · #1 (**permalink**) 09/02/2007, 10:48

buen Dia

la dificultad que tengo es que mediante ajax cargo en in div un menu acordeon usando prototype, el lio es que me carga los estilos pero no el efecto de abrir o cerrar el menu.

tengo en la pag llamadora todas las funciones y librerias.

resulta que para generar el efecto se ejecuta un script, resulta que lo coloco en la pagina llamadora o en la que cargo y no funciona, he intentado con eval pero no se crea el efecto.

si llamo directamente el archivo si funciona correctamente el menu.

de ante mano muchas gracias por la ayuda

.

stock · #2 (**permalink**) 09/02/2007, 12:13

resulta que no seoy adivino para adivinar tu codigo y detectar el erros

te sugiero poner un poco de tu codigo, para ver mejor que intentas ahcer!

have funnnnnnnnnnnnnnn

carMong · #3 (**permalink**) 10/02/2007, 14:09

Hola
pues si no! , sin el codigo como dificil sin embargo el problema radica en que no se ejecuta una funcion javascript en el archivo que se carga desde ajax si lo llamo directamente funciona bien.

El menu es totalmente funcional. pero si cargo las listas desde ajax en un div, no se despliega el efecto pero si se cargan los estilos. lo que quiero es cargar el div <div id="navBar"> desde ajax.

nota:este cod lo encontre en una web; la he estado buscando y no la encuentro, sin embargo no tenia ninguna nota sobre la licencia.

al archivo pag html le he agragado una funcion asociada al evento onclick para que cargue por medio de ajax el div, creo que no es necesario colocar el cod, los he colocado asi para que le sirvan a otros.

los estilos

Código:

body, input, textarea {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 11px;
}
h1 {font-size: 20px;}
h2 {font-size: 18px;}
h3 {font-size: 14px;}

 
#navBar {
	border: 1px inset #a7a6aa;
	width: 150px;
}
	#navBar .section {
		border: 1px solid  #a7a6aa;
}
	#navBar .section h3 {

		background: #ebe9ed;
		color:  #000000;
		margin:0;
		padding: 5px;
		cursor: pointer;
		font-size: 12px;
		text-align: center;
	}
	#navBar .section .contents {
		padding: 5px;
		height: 350px;
		overflow: auto;
	}

acordian.js

Código:

Accordian = Class.create();
Accordian.prototype = {
	initialize: function(elem, clickableEntity) {
		this.container = $(elem);
		var headers = $$('#' + elem + ' .section ' + clickableEntity);
		headers.each(function(header) {
			Event.observe(header,'click',this.sectionClicked.bindAsEventListener(this));
		}.bind(this));
	},
	sectionClicked: function(event) {
		this.openSection(Event.element(event).parentNode);
	},
	openSection: function(section) {
		var section = $(section);
		if(section.id != this.currentSection) {
			this.closeExistingSection();
			this.currentSection = section.id;
			var contents = document.getElementsByClassName('contents',section);
			contents[0].show();
		}
	},
	closeExistingSection: function() {
		if(this.currentSection) {
			var contents = document.getElementsByClassName('contents',this.currentSection);
			contents[0].hide();
		}
	}
}

la pagina html

Código:

<html><head><title>Accordian Example Page</title>
	<script src="archivos/prototype.js"></script>
	<script src="archivos/accordian.js"></script>
  	<link href="archivos/style.css" rel="stylesheet" type="text/css" >	 </link>

	<script>
		Event.observe(window,'load',init,false);
		function init() {
			accordian = new Accordian('navBar','h3');
		}
	</script></head><body>

<h1>Accordian Examples</h1>
<div style="float: left;">
	<div id="navBar">
		<div class="section" id="S_Nav1">
			<h3>Nav 1</h3>
			<div class="contents" style="display: none;">
				Nav section 1
			</div>
		</div>
		<div class="section" id="S_Nav2">
			<h3>Nav 2</h3>
			<div class="contents" style="display: none;">
				Nav section 2
			</div>
		</div>
		<div class="section" id="S_Nav3">
			<h3>Nav 3</h3>
			<div class="contents" style="display: none;">
				Nav section 3
		             </div>
		</div>

</div>
</div>


</body></html>



  </body>
</html>

graicas por la ayuda.