Accordion per Scriptaculous

Lunedì 16 Luglio, 2007

Finalmente un bello script in Javascript (scarica Accordion 1.0), semplice e leggero, che permette di aggiungere il componente Accordion usato in Flash e in mootools sfruttando la libreria scriptaculous. Effettivamente mancava questo oggetto, utile in tante occasioni. Questa versione è estremamente semplice e permette di creare Accordion sia orizzonali che verticali. Lo script è gratuito, tuttavia potete fare una piccola donazione all'autore per aiutarlo ad acquistare un bel MacPro ;)

Per utilizzarlo basta inserire queste semplici righe di codice:

PLAIN TEXT
HTML:
  1. <script type="text/javascript" src="javascript/prototype.js"></script>
  2. <script type="text/javascript" src="javascript/effects.js"></script>
  3. <script type="text/javascript" src="javascript/accordion.js"></script>

Il markup HTML è immediato:

PLAIN TEXT
HTML:
  1. <h3 class="accordion_toggle">Title Bar</h3>
  2. <div class="accordion_content">
  3. ...
  4. </div>
  5. ...
  6. ...
  7. ...
  8. <h3 class="accordion_toggle">Title Bar</h3>
  9. <div class="accordion_content">
  10. ...
  11. </div>

Un'esempio pratico:

PLAIN TEXT
JavaScript:
  1. // General Syntax
  2. new accordion('container-selector', options);
  3.  
  4.  
  5. // Horizontal example
  6. var horizontalAccordion = new accordion('#top_container', {     
  7.     classNames : {
  8.           toggle : 'horizontal_accordion_toggle',
  9.           toggleActive : 'horizontal_accordion_toggle_active',
  10.           content : 'horizontal_accordion_content'
  11.      },     
  12.      defaultSize : {
  13.          width : 525
  14.      },
  15.      direction : 'horizontal'
  16. });
  17.  
  18. // Vertical Accordion
  19. var verticalAccordion = new accordion('#bottom_container');

Post correlati

Tags: , , , , , , ,
Pubblicato in Internet, Javascript, Sviluppo | 3 commenti »