Effetto Fx.Slide di mootools - come applicarlo a più di un elemento?

**essezeta** · 21-08-2008, 20:36

Buona serata a tutti,

ho bisogno di una dritta...

ho l'effetto Fx.Slide della libreria mootools... QUESTO per intendersi...

tutto a posto, però nella demo viene applicato ad un solo elemento, nel mio esempio al div#scorri_per_me:

codice:

<html>
<head>
	<script type="text/javascript" src="mootools.js"></script>

	<script type="text/javascript">
	window.addEvent('domready', function() {
	
	var myVerticalSlide = new Fx.Slide('scorri_per_me');

	$('vertical_toggle').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.toggle();
	});

	});
	</script>
</head>
<body>

apri/chiudi

<div id="scorri_per_me" style="height:100px; width:200px; background:#ff0000">
contenuto contenuto contenuto
</div>

</body>
</html>

Da principiante quale sono, per applicare l'effetto a DUE div l'unica cosa che sono riuscito a fare è stata la duplicazione delle funzioni e degli elementi a cui applicarle, rinominando tutto con un bel BIS...

quindi nel markup:

codice:

apri/chiudi

<div id="scorri_per_meBIS" style="height:100px; width:200px; background:#ff0000">
contenuto contenuto contenuto
</div>

e poi nel js:

codice:

	var myVerticalSlideBIS = new Fx.Slide('scorri_per_meBIS');

	$('vertical_toggleBIS').addEvent('click', function(e){
		e.stop();
		myVerticalSlideBIS.toggle();
	});

Va bene funziona... ma se voglio altri cinque elementi devo duplicare tutto per altre 4 volte?
Non sporco e appesantisco il js così?

Non c'è qualche dichiarazione che possa inserire nel window.addEvent('domready', function() e poi lavorare solo di ID?

Insomma quella che propongo è l'unica maniera o esiste un modo più ortodosso?
Vorrei un parere da javascriptisti...

Grazie in anticipo e comunque a chiunque mi dedica cinque minuti...

PS: ho visto che ci sono altre ecchie richieste di aiuto che vanno provprio in questa direzione... ma nessuna è stata mai esaurita...

**Xinod** · 21-08-2008, 23:32

x es.

codice:

window.addEvent('domready',function(){
	$$('.contenitore').each(function(item){
		var elToSlide=new Fx.Slide(item.getElement('.daScorrere'));
		elToSlide.hide();
		item.getElement('.interruttore').addEvent( 'click',function(e){e.stop();elToSlide.toggle();});
	});
});

codice:

<div class="contenitore">
	apri/chiudi 0
	<div class="daScorrere" style="height:100px; width:200px; background:#ff0000">
		contenuto contenuto contenuto 0
	</div>
</div>
<div class="contenitore">
	apri/chiudi 1
	<div class="daScorrere" style="height:100px; width:200px; background:#ff0000">
		contenuto contenuto contenuto 1
	</div>
</div>
...

poi approfondendo un po' mootools potresti ottimizzarlo anche di piu'
ciao

**essezeta** · 22-08-2008, 00:54

Ti ringrazio Xinod!
così è decisamente più pratico!!
io avevo 3 steps da visualizzare (solo a volte 4): abstract + fullpost + dettagli autore (+ foto se ci sono)...
li generavo via php e ora che non devo specificare ID univoci posso impostarmi un bel template ed evito metà del lavoro lato server...
quindi per le mie finalità adotterò questa soluzione invece della mia...

Per approfondire un attimo, però...

Questo modo è più pratico perché non ho bisogno di avere ID per ogni elemento...
però senza ID come faccio a dirgli di chiudere tutti gli elementi eccetto quello appena cliccato?

col mio metodo (non si vede perché ho semplificato) io davo miavar.slideOut() per tutti gli ID eccetto quello in cui lavoravo...
ma così non posso più...

a meno che... mi viene da pensare guardando il tuo codice...
mica esiste una specie di .each(function(item)-eccetto-questa-da-cui-sto-chiamando?
in modo da settare .hide() o .slideOut() al resto di elementi...

sì, mi rendo conto che mi sto esprimendo veramente in turco...
ma oltre che principiante di js è pure notte...
da domani vedo di dare una sbirciatina al wiki della libreria... magari c'è già qualcosa di pronto...

Però... se qualcuno ha interpretato le stronxate che ho detto

VVoVe: e sa far comportare l'esempio postato da Xinod come un normale accordion che quando apri un nuovo box si chiude il precedente...

buonanotte a tutti
e grazie ancora a Xinod, sei sto preziosissimo...

Discussione: Effetto Fx.Slide di mootools - come applicarlo a più di un elemento?

Strumenti discussione

Ricerca discussione

Visualizza

Effetto Fx.Slide di mootools - come applicarlo a più di un elemento?

Permessi di invio