掲示板
Nascondere/visualizzare un div
7年前 に Marco Azzalini によって更新されました。
Nascondere/visualizzare un div
Regular Member 投稿: 146 参加年月日: 14/11/18 最新の投稿
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
ed il relativo script
ma ottengo solo questo strano errore in console
Cosa sto sbagliando?
ciao e grazie
Marco
<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
7年前 に Daniele Baggio によって更新されました。
RE: Nascondere/visualizzare un div
Expert 投稿: 336 参加年月日: 08/12/05 最新の投稿
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
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
7年前 に Marco Azzalini によって更新されました。
RE: Nascondere/visualizzare un div
Regular Member 投稿: 146 参加年月日: 14/11/18 最新の投稿
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
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
7年前 に Daniele Baggio によって更新されました。
RE: Nascondere/visualizzare un div
Expert 投稿: 336 参加年月日: 08/12/05 最新の投稿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.
7年前 に Marco Azzalini によって更新されました。
RE: Nascondere/visualizzare un div
Regular Member 投稿: 146 参加年月日: 14/11/18 最新の投稿
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:
Se avrò tempo di realizzare l'animazione con scivolamento orizzontale a scomparsa del pannello, mi rifaccio vivo ;-)
ciao
Marco
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