8. Back inside the FAQ you need to do two things: prepare the dd elements for opening
and closing and then establish the event handler for the anchors. The dd bit is pretty
straightforward:
initialize: function(){
trace( 'initialize()' );
// Collect the DLs & loop
$$( 'dl.faq' ).each( function( dl ){
trace( 'DL loop' );
// Turn "on" the FAQ
dl.addClassName( 'on' );
// Loop through the DDs
$A( dl.getElementsByTagName( 'dd' ) ).each( function( dd ){
// Set up the height effect (using moo.fx)
dd.heightFX = new fx.Style(
dd, 'height',
{ duration: 500,
onComplete: function(){
this.complete( dd );
}.bind( this )
}
);
// store the original height for later
dd.openHeight = dd.getHeight();
// Close this DD
dd.heightFX.set( 0 );
}.bind( this ) ); // End DD loop
}.bind( this ); // End DL loop
},
This code collects the
elements within each FAQ dl and makes them enumerable
(using Prototype??™s $A()). It then iterates through each (using Prototype??™s Enumerable
.each() method), setting the dd elements heightFX property to be an instance of
fx.Style, which is a generic way Moo.fx enables you to transition a CSS property from
one value to another (and enables you to include only the base Moo.fx library). In this
example, you??™ll transition the height property of the dd over a period of half a second
(500ms) and trigger the FAQ.complete() method (which currently doesn??™t do anything,
but will do some housekeeping for you later on) when the effect has finished.
Pages:
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252