FX.Slide von MooTools - Erfahrungen?

charlie · #1 (**permalink**) 03.09.2008, 23:24

Hallo xHtml-Community

Ich bin ziemlich angetan von den Effekten von MooTools. Ich denke einige von euch haben bestimmt ein paar Erfahrungen damit gesammelt?

Nur tue ich mich zur Zeit noch schwer mit dem einbinden der Effekte.

Schaut euch mal mein geziptes, einfaches Beispiel an. Was mache ich falsch?

Ausgangspunkt war die DEMO von FX.Slide, die man sich auf der Page von MooTools anschauen kann.

HTML-Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>FX.Slide Test</title>

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


<style type="text/css">
<!--
#vertical_slide {
width: 200px;
height: 200px;
background-color:#00CC33;
}
-->
</style>

</head>

<body>

<div id="1"><a id="v_toggle" href="#">klick mich, um zu klappen</a>
</div>

<div id="vertical_slide">klappbare Box
</div>

</body>
</html>

JAVA-Code:

Code:

window.addEvent('domready', function() {
	var status = {
		'true': 'open',
		'false': 'close'
	};
	
	//-vertical

	var myVerticalSlide = new Fx.Slide('vertical_slide');

	$('v_slidein').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.slideIn();
	});

	$('v_slideout').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.slideOut();
	});

	$('v_toggle').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.toggle();
	});

	$('v_hide').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.hide();
		$('vertical_status').set('html', status[myVerticalSlide.open]);
	});
	
	$('v_show').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.show();
		$('vertical_status').set('html', status[myVerticalSlide.open]);
	});
	
	// When Vertical Slide ends its transition, we check for its status
	// note that complete will not affect 'hide' and 'show' methods
	myVerticalSlide.addEvent('complete', function() {
		$('vertical_status').set('html', status[myVerticalSlide.open]);
	});


	//--horizontal
	var myHorizontalSlide = new Fx.Slide('horizontal_slide', {mode: 'horizontal'});

	$('h_slidein').addEvent('click', function(e){
		e.stop();
		myHorizontalSlide.slideIn();
	});

	$('h_slideout').addEvent('click', function(e){
		e.stop();
		myHorizontalSlide.slideOut();
	});

	$('h_toggle').addEvent('click', function(e){
		e.stop();
		myHorizontalSlide.toggle();
	});

	$('h_hide').addEvent('click', function(e){
		e.stop();
		myHorizontalSlide.hide();
		$('horizontal_status').set('html', status[myHorizontalSlide.open]);
	});
	
	$('h_show').addEvent('click', function(e){
		e.stop();
		myHorizontalSlide.show();
		$('horizontal_status').set('html', status[myHorizontalSlide.open]);
	});
	
	// When Horizontal Slide ends its transition, we check for its status
	// note that complete will not affect 'hide' and 'show' methods
	myHorizontalSlide.addEvent('complete', function() {
		$('horizontal_status').set('html', status[myHorizontalSlide.open]);
	});
});

cgdesign · #2 (**permalink**) 05.09.2008, 14:01

In die demo.js kommt nur das hier:

Code:

window.addEvent('domready', function() 
{
	var myVerticalSlide = new Fx.Slide('vertical_slide');

	$('v_toggle').addEvent('click', function(e)
	{
		e.stop();
		myVerticalSlide.toggle();
	});
});

charlie · #3 (**permalink**) 06.09.2008, 01:29

Vielen Dank für die Antwort! Jetzt hat es geklappt. Werde mich wohl noch ein wenig mit Java auseinander setzen müssen.

Boris · #4 (**permalink**) 06.09.2008, 13:09

Zitat:

Werde mich wohl noch ein wenig mit Java auseinander setzen müssen.

JavaScript wäre besser in diesem Fall

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Link ausblenden nach Klick (Mootools Fx.Slide)	Synoxis	Javascript & Ajax	1	20.05.2010 14:33
Probleme mit mootools FX.Slide in Verbindung mit Fx.Accordion	dkabilka	Javascript & Ajax	4	14.02.2010 18:05
mootools Fx.Slide: ohne Mausklick öffnen	hailander	Javascript & Ajax	4	28.01.2010 15:23
MooTools: Fx.Slide - konfiguration	img	Javascript & Ajax	0	27.06.2008 13:19