Vorlage Diskussion:Ausklappen2: Unterschied zwischen den Versionen

aus Kamelopedia, der wüsten Enzyklopädie
Zur Navigation springen Zur Suche springen
(das ist doch mal ne runde Sache... *freu*)
K (Neuer Abschnitt: *zweckendfremd*)
Zeile 134: Zeile 134:
 
addEvent( window, "load", makeAusklapp, false );
 
addEvent( window, "load", makeAusklapp, false );
 
</pre>
 
</pre>
 +
 +
== *zweckendfremd* ==
 +
 +
nur mal so nebenbei ... funktioniert noch nicht 100%ig (man muss 2x klicken am Anfang) ... aber *großeaugenmach*
 +
 +
<div style="position:relative" class="klapp">
 +
<div class="klapp_t">{{Ka-Mel-Oh!
 +
    | nr = 23
 +
    | typ = monster
 +
    | hk = 2
 +
    | name = Dromedarminator
 +
    | bild = Dromedarminator.jpg
 +
    | ap = 45
 +
    | dp = 35
 +
    | lp = 160
 +
    | d = 6
 +
    | klasse = Kampfmaschine
 +
    | rasse = Kamel/Cyborg
 +
    | angriff = Hasta La Vista, Baby!
 +
    | abwehr = I'll be back!
 +
    | text = Der Dromedarminator wurde von [[IHNEN]] aus der Zukunft geschickt, um den künftigen Herdenführer zu töten. Wegen eines Softwarefehlers ging er aber in die Politik und ist jetzt Gouverneur in [[Kamelfornien]].
 +
    | handicap = 0
 +
    | autor = WiMu}}</div>
 +
<div style="position:absolute; top:5px; left:5px;" class="klapp_i">http://kamelopedia.mormo.org/images/8/8e/Kartenr%C3%BCckseite.png</div>
 +
</div>{{clear}}
 +
--[[Kamel:WiMu|WiMu]] 13:21, 28. Jan 2008 (CET)

Version vom 28. Januar 2008, 14:21 Uhr

Damit die Vorlagen Vorlage:Ausklappen2 und Vorlage:Ausklappen3 funktionen, müsste folgendes ergänzt werden. -- Grüße J* 23:34, 27. Jan 2008 (CET)

Ich hab' das mal beides ergänzt. Funzt alles super ... getestet in Firefox2 und IE7. Einziger Haken: die Klick-Kats und Sonderzeichen sind jetzt unter dem Bearbeiten-Fenster (so wie früher?). Überschneiden sich da irgendwelche Klassen? Blick' gerade nicht durch.
Trotzdem: vieles groß DANKE! --WiMu 11:00, 28. Jan 2008 (CET)
Super! Das sieht nach harter Arbeit aus... Danke an alle Java- und sonstigen Kümmerer sagt das Schachtelkamel 12:47, 28. Jan 2008 (CET)


Monobook.css

.klapp {
	cursor: pointer;
}
span.klapp {
	text-decoration: none;
	color: #002bb8;
	background: none;
	}

span.klapp:hover {
	text-decoration: underline;

Monobook.js

// ================================================================================
// Ein- und Ausblenden per Javascript

// mit den folgenden Funktionen lässt sich ein div-Konstrukt in ein Einblende-Ausblende-Ding verwandeln
//
// Variante 1 (Klick irgendwo blendet ein oder aus):
//	<div class="klapp">
//		<div class="klapp_t">Titel im ausgeblendeten Zustand</div>
//		<div class="klapp_e">Titel im ausgeblendeten Zustand</div>
//		<div class="klapp_i">Einzublendender Inhalt</div>
//	</div>
//
// Variante 2 (ein- und ausblenden nur mit Links):
//	<div>
//		<div class="klapp_t">Titel im ausgeblendeten Zustand mit <span class="klapp">Einblendelink</span></div>
//		<div class="klapp_e">Titel im ausgeblendeten Zustand mit <span class="klapp">Ausblendelink</span></div>
//		<div class="klapp_i">Einzublendender Inhalt</div>
//	</div>

function ausklapp( element )
{
	var klapp_i = null;
	var klapp_e = null;
	var klapp_t = null;

	for (i in element.childNodes)
	{
		if( element.childNodes[i].nodeType == 1 )
		{
			if ( element.childNodes[i].className == "klapp_i" )
				klapp_i = element.childNodes[i];
			else if ( element.childNodes[i].className == "klapp_t" )
				klapp_t = element.childNodes[i];
			else if ( element.childNodes[i].className == "klapp_e" )
				klapp_e = element.childNodes[i];
		}

		if ( klapp_i && klapp_t && klapp_e )
			break;
	}

	if( klapp_i.style.display == "block")
	{
		klapp_i.style.display = "none";
		klapp_e.style.display = "none";
		klapp_t.style.display = "block";

	}
	else
	{
		klapp_i.style.display = "block";
		klapp_e.style.display = "block";
		klapp_t.style.display = "none";
	}

}

// Diese Funktion weist einem Objekt einen Event-Handler zu.
// Argumente:	objekt - das Objekt
//		onEvent - ein event, z.b. "click" (ohne das "on", kleingeschrieben, als String)
//		funktion - ein Pointer auf die aufzurufende Funktion
//		captionMode - falls es keinen speziellen Grund gibt, einfach auf false setzen
function addEvent(objekt, onEvent, funktion, captionMode )
{
	if (objekt.addEventListener)
	{
		objekt.addEventListener(onEvent, funktion, captionMode);
		return true;
	}
	else if (objekt.attachEvent)
	{
		var ret = objekt.attachEvent("on" + onEvent, funktion);
		return ret;
	}
	else
	{
		return false;
	}
}

// Event-Handler für alle class="klapp"-Objekte zuweisen
function makeAusklapp()
{
	// klapp-div-Rahmen
	var a = document.getElementsByTagName("div"); 
	for ( div in a )
	{
		if ( a[div].className == "klapp" )
		{
			//Leider nicht IE-Kompatibel:
			//var f = function () { ausklapp(this) };
			//addEvent( a[div], "click", f , false );
			//stattdessen:

			a[div].onclick = function () { ausklapp(this);}
		}
	}

	// klapp-spans-Rahmen als Link-Ersatz
	var a = document.getElementsByTagName("span"); 
	for ( span in a )
	{
		if ( a[span].className == "klapp" )
		{
			a[span].onclick = function () { ausklapp(this.parentNode.parentNode);}
		}
	}

}

// makeAusklapp() nach Laden des Fensters ausführen!!
addEvent( window, "load", makeAusklapp, false );

*zweckendfremd*

nur mal so nebenbei ... funktioniert noch nicht 100%ig (man muss 2x klicken am Anfang) ... aber *großeaugenmach*

--WiMu 13:21, 28. Jan 2008 (CET)