✔ Mootools 1.2 - Events für unsortierte DIVs.

R

Ramix

Hallo Zusammen,

Mich bezwingt heute wieder mal Mootools. Um genau zu sein die Version 1.2. Bis jetzt habe ich immer mit On-Events gearbeitet (Onclick ect...), doch jetzt habe ich folgendes Problem:

Ich habe mehrer DIVs, welche "iteminhalt1" oder "iteminhalt25" heissen. Die Nummern sind nicht sortiert (ist nicht möglich -> DB). Auch weiss ich nie wieviele das vorkommen. :rolleyes:

Jetzt möchte ich gerne für jedes dieser DIV eine Minimieren-Funktion zur Verfügung stellen. Das Ganze funktioniert mit Onclick bis jetzt so:

Code: 
function minimieren(nummer){

	var min = $('iteminhalt'+nummer);
	var minimieren = new Fx.Morph(min);

	var aminimieren = function(){
		var minhohe = min.offsetHeight;
		if(minhohe == 0){
			this.start({
				'height': 100,
				'background-color': '#ffffff'
			});	
		}
		else{
			this.start({
				'height': 0,
				'background-color': '#000000'
			});
			document.getElementById("iteminhalt"+nummer).innerHTML = "";
		}	
	};
 
	$('minimieren'+nummer).addEvent('click', aminimieren.bind(minimieren));	
}

Ich brauche mit dieser Funktion immer 2 Klicks auf den Minimieren-Knopf. Beim ersten Mal wird die Funktion aufgeführt und das Event hinzugefügt. Beim zweiten Klick wird der Event aufgeführt.

Kann ich das in einem Klick, mit OnClick realisieren? Und wie?
Kann ich der "Domready-Function" am Anfang schon werte übergeben? Und wieder wie?

Vielen Dank scho mal im Voraus....
Gruess BINZ
 
Hi,

angenommen, es handelt sich um BUTTON-Elemente, die die Funktionen auslösen, könntest du im domready-Event alle Buttons durchlaufen und mittels eines regulären Ausdrucks prüfen, ob sie die geforderte ID enthalten (beginnen mit "minimieren"). Im Erfolgsfall rufst du die Funktion minimieren mit der extrahierten Nummer auf.

Beispiel:
Code: 
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<script src="mootools1.2.js" type="text/javascript"></script>

<script type="text/javascript">
  <!--
function minimieren(nummer){

	var min = $('iteminhalt'+nummer);
	var minimieren = new Fx.Morph(min);

	var aminimieren = function(){
		var minhohe = min.offsetHeight;
		if(minhohe == 0){
			this.start({
				'height': 100,
				'background-color': '#ffffff'
			});
		}
		else{
			this.start({
				'height': 0,
				'background-color': '#000000'
			});
			document.getElementById("iteminhalt"+nummer).innerHTML = "";
		}
	};

	$('minimieren'+nummer).addEvent('click', aminimieren.bind(minimieren));
}

window.addEvent('domready', function() {
  var arrElem = $$('button');
  for(var i=0; i<arrElem.length; i++){
    /minimieren([\d]+)/.exec(arrElem[i].id);
    if(RegExp.$1){
      minimieren(RegExp.$1);
    }
  }
});
 //-->
</script>
</head>
<body>
<button id="minimieren25">ja</button>
<div id="iteminhalt25">ja</div>
<button id="minimieren2">ja</button>
<div id="iteminhalt2">ja</div>
<button id="minimieren250">ja</button>
<div id="iteminhalt250">ja</div>
<button id="minimieren1">ja</button>
<div id="iteminhalt1">ja</div>
<div id="Eiteminhalt25">nein</div>
<button id="minimieren11">ja</button>
<div id="iteminhalt11">ja</div>
<div>nein</div>
<div id="NochNeFalscheID">nein</div>
<button id="minimieren3">ja</button>
<div id="iteminhalt3">ja</div>
</body>
</html>
Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Hallo,

Vielen Dank für die Antwort und Lösung. Ich hatte zwar keinen Button, konnte das ganze aber duch ein hidden-input ersetzen...

Merci nochmal.
Gruess BINZ
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück