Tutorial Javascript: Accordion con MooTools

Torniamo sul layout che abbiamo visto nel precedente tutorial Javascript, per iniziare ad aggiungere degli interessanti effetti animati:

questa volta prendiamo in esami uno dei molteplici effetti Accordion presenti in rete, realizzato con framework MooTools dai developers di solutoire.com. Letteralmente l’Accordion è un effetto “a fisarmonica“: mediante il click su un pulsante metatestuale, il <div> scivolerà mostrando un contenuto nascosto.

Accordion Mootools Tutorial Javascript

Rimaniamo ancora in tema di spionaggio, scaricando la seguente immagine dal sapore vintage ed isolando i 4 rettangoli come abbiam visto nel precedente articolo.

Inseriamo all’interno del tag <head> la chiamata al file Javascript per il plugin MooTools, che trovate in download alla fine dell’articolo assieme al resto delle risorse.

<script type="text/javascript" src="js/mootools.js"></script>

Ora scriviamo il codice Javascript sempre all’interno dell’<head>:

<script type="text/javascript">

var accordion;
var accordionTogglers;
var accordionContents;

window.onload = function() {

accordionTogglers = document.getElementsByClassName('accToggler');

accordionTogglers.each(function(toggler){
//remember the original color
toggler.origColor = toggler.getStyle('background-color');
//set the effect
toggler.fx = new Fx.Color(toggler, 'background-color');
});

accordionContents = document.getElementsByClassName('accContent');

accordion = new Fx.Accordion(accordionTogglers,
accordionContents,{
//when an element is opened change the
//background color to blue
onActive: function(toggler){
toggler.fx.toColor('#6899CE');
},
onBackground: function(toggler){
//change the background color to the original (green)
//color when another toggler is pressed
toggler.setStyle('background-color', toggler.origColor);
}
});
}

</script>

Non rimane che scrivere i due blocchi di Css, il primo relativo all’Accordion, in cui potrete modificare il background del pulsante interattivo, il secondo inerente il layout generale della pagina.

/*ACCORDION CSS*/

<style type="text/css">

			.accToggler{
			margin: 3px auto;
			padding: 3px;
			width: 92px;
			background: #acc95f;
			color: #000;
			border: 1px solid #fff;
			cursor: pointer;
			}

			.accContent{
			margin: 0px auto;
			width: 92px;
			}

</style>

/*LAYOUT CSS*/

<style type="text/css">

			html,body{
			background-color: #fff;
			height: 100%;
			width: 100%;
			margin: 0;
			overflow: hidden;

			}

			div#container{
			margin:0px auto;
			text-align:center;
			background-color: #fff;
			}

			#content{
			position: absolute;
			margin:0 auto;
			width:960px;
			height:800px;
			top: 50%;
			left: 50%;
			margin-top: -147px;
			margin-left: -480px;
			background-color: #fff;
			}

			#footer{
			position:absolute;
			bottom:0;
			}

			ul{
			list-style: none;
			margin: 0;
			padding: 0;
			padding-bottom: 9px;

			}

			li {
			display: inline;
			margin:0px auto;
			padding:10px;
			}

			/*Contenuto suddiviso in 4 parti*/

			div#contentsplit{
			width:50%;
			margin:0px auto;
			text-align:center;
			}

			div.split4 div{
			float: left;
			}</style>

Il penultimo #id e l’ultima classe sono relativi alla suddivisione dei 4 blocchi di pulsanti, e alle relative immagini di contenuto. Ho mantenuto la possibilità di attivare l’effetto Rollover sulle immagini, pertante troverete un ulteriore Javascript all’interno di ogni paragrafo: di seguito l’html che dovremo integrare all’interno del tag <body>.

<div id="container">

		<div id="content">

<div id="contentsplit">
 <div class="split4">

					<div>
						<p class="accToggler">Click me!</p>
							<p class="accContent"><a href="#" ><img alt="1" src="images/1.jpg" onmouseover="this.src='images/1_over.jpg';" onmouseout="this.src='images/1.jpg';"/></a></p></div>

					<div>
						<p class="accToggler">Click me!</p>
							<p class="accContent"><a href="#"><img alt="2" src="images/2.jpg" onmouseover="this.src='images/2_over.jpg';" onmouseout="this.src='images/2.jpg';"/></a></p></div>

					<div>
						<p class="accToggler">Click me!</p>
							<p class="accContent"><a href="#"><img alt="3" src="images/3.jpg" onmouseover="this.src='images/3_over.jpg';" onmouseout="this.src='images/3.jpg';"/></a></p></div>

					<div>
						<p class="accToggler">Click me!</p>
							<p class="accContent"><a href="#"><img alt="4" src="images/4.jpg" onmouseover="this.src='images/4_over.jpg';" onmouseout="this.src='images/4.jpg';"/></a></p></div>

				</div>

			</div>

</div>

</div>

Tutto molto semplice e chiaro, vero? La classe accToggler contiene il pulsante metatestuale, mentre la classe accContent “nasconde” il contenuto che decidiamo di inserire (in questo caso le immagini).

Alla prossima!

Scritto da Magoo

Magoo

Web Developer & Mobile Developer, Game Lover insomma un Nerd.
Co-founder Iwebdesigner.it, Nerdzhouse SRL.
Prendo a schiaffi la tastiera fino a quando non succede qualcosa di buono.

COMMENTA

Loading Disqus Comments ...
Loading Facebook Comments ...

Un Commento

Lascia una risposta
  1. Do you mind if I quote a couple of your posts as long as I
    provide credit and sources back to your webpage? My website is in the very same niche
    as yours and my users would genuinely benefit from
    some of the information you present here. Please let me know if this alright with you.
    Many thanks!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *