Aufbau einer Klasse in MooTools

In diesem Tutorial zeige ich euch wie ihr eine Klasse erstellt hilfreiche Methoden einbindet und diese nutzen könnt.
Die Klasse die erstellt wird, soll ein oder mehrere Elemente bei Mouseover einblenden und bei Mouseout ausblenden.
Die Optionen die übergeben werden sollen sind:

  • Elemente als ID, Klasse oder Tagname
  • Werte für minimale und maximale Deckkraft (Opacity)
  • Art der Animation
  • Dauer der Aniation

Als erstes erstellen wir uns ein JavaScript Datei (z.B, gbHover.js) und erstellen unsere Klasse.

var gbHover = new Class({
});

Wir implantieren nun die Klasse Options und legen unsere Optionen an, die als Standard gelten sollen.

Implements: Options,
options: {
	opaMin: 0.5,
	opaMax: 1,
	duration: 'short',
	transition: Fx.Transitions.Expo.easeIn
}

Die Funktion initialize soll nun die übergebenen Elemente festlegen, die individuellen Optionen verarbeiten und die Methode this.setHover() ausführen.

initialize: function(elements, options){	
}

Wir initialisieren nun die Klasse, damit sie beim erstellen ausgeführt wird und übergeben der Funktion einmal die Elemente die animiert werden sollen und die individuellen Optionen.

initialize: function(elements, options){
	this.elements = elements || [];
	this.setOptions(options);
	this.setHover();
}

Zum Schluss erstellen wir die Funktion setHover(), die nichts anderes tun wird als allen Elementen:

  • die Deckkraft (opaMin) zuzuweisen
  • die Art und Dauer der Animation zu übergeben
  • die Animation bei Mouseover (opaMax) und Mouseout (opaMin) auszuführen
setHover: function (){
	var me = this;
	this.elements.each(function (el, i){
		el.setStyles({
			'opacity': me.options.opaMin
		});
		el.morph = new Fx.Morph(el, {
			duration: me.options.duration,
			transition: me.options.transition
		});
		el.addEvents({
			'mouseover': function(){
				this.morph.cancel();
				this.morph.start({
					'opacity': me.options.opaMax
				});
			},
			'mouseout': function(){
				this.morph.cancel();
				this.morph.start({
					'opacity': me.options.opaMin
				});
			}
		});
	});
}

Alles in einem sieht die Klasse gbHover nun so aus und ist einsatzfähig.

var gbHover = new Class({
	Implements: Options,
	options: {
		opaMin: 0.5,
		opaMax: 1,
		duration: 'short',
		transition: Fx.Transitions.Expo.easeIn
	},
	initialize: function(elements, options){
		this.elements = elements || [];
		this.setOptions(options);
		this.setHover();
	},
	setHover: function (){
		var me = this;
		this.elements.each(function (el, i){
			el.setStyles({
				'opacity': me.options.opaMin
			});
			el.morph = new Fx.Morph(el, {
				duration: me.options.duration,
				transition: me.options.transition
			});
			el.addEvents({
				'mouseover': function(){
					this.morph.cancel();
					this.morph.start({
						'opacity': me.options.opaMax
					});
				},
				'mouseout': function(){
					this.morph.cancel();
					this.morph.start({
						'opacity': me.options.opaMin
					});
				}
			});
		});
	}
});

Nun setzen wir gbHover ein. Dazu Laden wir MooTools und die erstellte Klasse, erstellen eigene Optionen und führen die Klasse aus.

<p id="gbHoverDemo">Dieses Element hat die ID "gbHoverDemo" und die Deckkraft soll von 0.4 - 1 animiert werden.</p> 
<ul class="gbHoverDemoList"> 
  <li>Diese Liste hat die Klasse "gbHoverDemoList".</li> 
  <li>Alle Einträge in der Liste sollen animiert werden</li> 
  <li>und zwar von 1 - 0.2.</li> 
  <li>Die Art der Animation ist Fx.Transitions.Bounce.easeInOut und dauert 1000 Millisekunden.</li> 
</ul> 
<p>Dieses Element enthält einen <sup>sup Tag</sup> das ich genau wie #gbHoverDemo animieren werde.</p>
<script type="text/javascript" src="upload/file/gbHover_min.js"></script> 
<script type="text/javascript">window.addEvent('domready', function(){
	// animation für #gbHoverDemo und sup
	var gbHoverOpt = {
		opaMin: 0.4,
		opaMax: 1,
		duration: 'short',
		transition: Fx.Transitions.Expo.easeIn
	};
	var myHover = new gbHover($$('#gbHoverDemo, sup'), gbHoverOpt);
	
	// animation für .gbHoverDemoList li
	var gbHoverOpt2 = {
		opaMin: 1,
		opaMax: 0.2,
		duration: 1000,
		transition: Fx.Transitions.Bounce.easeInOut
	};
	var myHover2 = new gbHover($$('.gbHoverDemoList li'), gbHoverOpt2);
});
</script>