Simple Accordion con la classe USimpleTabStrip
Mercoledì 20 Agosto, 2008La classe USimpleTabStrip, presentata in Unobtrusive Simple TabStrip, può essere utilizzata anche per realizzare un semplice menu Accordion.
Utilizzando gli effetti di BlindUp() e BlindDown() offerti da Scriptaculous:
JavaScript:
-
function init(){
-
uts = new USimpleTabStrip();
-
uts.Init();
-
uts.onShow = function(e) {
-
new Effect.BlindDown(e);
-
}
-
uts.onHide = function(e) {
-
new Effect.BlindUp(e);
-
}
-
}
E riposizionando gli elementi HTML (sorgente HTML):
HTML:
-
<div class="accordion">
-
<a href="#acc1">Accordion 1</a>
-
<a name="acc1"></a>
-
<h1>Content #1</h1>
-
<p>Bla bla bla....</p>
-
</div>
-
-
<a href="#acc2">Accordion 2</a>
-
<a name="acc2"></a>
-
<h1>Content #2</h1>
-
<p>Bla bla bla....</p>
-
</div>
-
-
<a href="#acc3">Accordion 3</a>
-
<a name="acc3"></a>
-
<h1>Content #3</h1>
-
<p>Bla bla bla....</p>
-
</div>
-
-
</div>
Si ottiene un semplice menu Accordion che può essere utilizzato in modo estremamente rapido.
