Nascondere/visualizzare un div

[Marco Azzalini, modificado hace 7 años.]

Ciao, sto cercando di utilizzare il toggler messo a disposizione da AlloyUI in una mia pagina JSP dove, tramite un pulsante, vorrei alternativamente mostrare/nascondere un certo div. Ho inserito questo pulsante

<aui:button value="Visualizza/Nascondi" onclick="divToggler('div-process-details')"></aui:button>

ed il relativo script

<aui:script>
Liferay.provide(
		window, 'divToggler',
		  function(divId) {
			var A = AUI();
		    new A.Toggler(
		      {
		        animated: true,
		        //closeAllOnExpand: true,
		        container: divId,
		        content: '.content',
		        expanded: true,
		        header: '.header',
		        transition: {
		          duration: 0.5,
		          easing: 'cubic-bezier(0, 0.1, 0, 1)'
		        }
		      }
		    ).render();
		  },['aui-toggler']
);
</aui:script>

ma ottengo solo questo strano errore in console

Uncaught TypeError: (intermediate value).render is not a function

Cosa sto sbagliando?

ciao e grazie
Marco

[Daniele Baggio, modificado hace 7 años.]

Pare che effettivamente non ci sia un metodo render().
A vedere l'esempio basic mi pare che devi semplificare qualche passaggio. E occhio al selettore del container.

http://alloyui.com/versions/2.0.x/examples/toggler/
http://alloyui.com/versions/2.0.x/api/classes/A.Toggler.html

[Marco Azzalini, modificado hace 7 años.]

Ciao Daniele, grazie per la risposta. Avendo bisogno dell'animazione, ho usato il 'Real World example' e non il Basic ma il concetto è il medesimo; solo che ho preso l'esempio della versione 3.0 dove appunto c'è il metodo render().
Tolta la chiamata a render() e seguendo la tua osservazione ho messo a posto le classi e gli id perché ho capito che stavo usando male il toggler che prevede di usare due oggetti, di cui l'header con funzioni appunto di 'commutatore'. La cosa funziona abbastanza ma mi sono reso conto che questo Toggler introduce una serie di div-wrapper che mi comprimono le dimensioni dei miei div e quindi rovinano tutto il layout della pagina.
Ammesso di riuscire ad aggiustare questo problema, mi rimane il fatto di far collassare il pannello con un movimento orizzontale e non verticale... speravo di poter giocare con le proprietà dell'oggetto transition ma non riesco a trovare molte informazioni in merito
Possibile che non esista un qualcosa di simile a quando generato dal tag <liferai-ui:panel> ma che lavori in orizzontale anziché in verticale, in modo da poter far scomparire il mio div collassandolo a lato dello schermo? Se ci fosse, avrei già finito!
Ho idea che dovrò farmi qualcosa di completamente custom con javascript, ma sinceramente speravo di poterlo evitare.

ciao e grazie
Marco

[Daniele Baggio, modificado hace 7 años.]

Marco Azzalini:

Ho idea che dovrò farmi qualcosa di completamente custom con javascript, ma sinceramente speravo di poterlo evitare.

Io credo che dovresti trovare una soluzione solo dal lato css. Devi farti un css custom che posizioni il toggler-content dove vuoi.
Il javascript in questo caso non è ciò che ti risolve il problema.

[Marco Azzalini, modificado hace 7 años.]

Ciao, alla fine ho dovuto utilizzare javascript anche perché alla chiusura/apertura del pannello dovevo far succedere delle cose nella pagina (ad esempio cambiare la dicitura del pulsante che apre/chiude il pannello) e quindi l'uso di JS (anche se banale) era imprescindibile. Naturalmente avrei potuto da JS impostare delle classi CSS per impostare la visibilità come suggerisci tu ma per il mio scopo per il momento era più che sufficiente farlo direttamente da js.
Se per caso a qualcuno (pigro almeno quanto me ;-) ) interessa, riporto lo schema della soluzione:

Liferay.provide(
		window,
		'divToggler',
function(divId) {
	var A = AUI();
	var div=A.one('#'+divId);
	var divTogglerButton=A.one('#togglerButton');
	
	if (div!=null) {
		if (div.getStyle('display')=='none') {
			div.setStyle('display','block');
			divTogglerButton.html(Liferay.Language.get('hide-panel')); 
			//altre cose
		} else {
			div.setStyle('display','none');
			divTogglerButton.html(Liferay.Language.get('show-panel')); 
			//altre cose
		}
	} else {
		alert('switchDiv: div '+divId+' è null');
	}
}

Se avrò tempo di realizzare l'animazione con scivolamento orizzontale a scomparsa del pannello, mi rifaccio vivo ;-)

ciao
Marco