Im Forum kann ein Button eingefügt werden, der einen versteckten Text erst bei Klick darauf zu erkennen gibt. Hierbei muss nicht immer eine ID [klick1], [klick2], ... erhöht werden und es sind nur zwei Foren-Codes zu merken [spoiler] und [/spoiler] Im Anhang befindet sich ein Screenshot aus meinem Forum, der die Anleitung und eine kleine Demonstration zeigt. Eine bereits geschriebene Anleitung mit Begriffserklärung gibt es hier: Spoiler-Funktion
Wie wird der Button eingebaut?: Zuerst muss unter Admin -> Layout -> Header & Footer folgender Quelltext im Header eingefügt werden:
Anschließend wird unter Admin -> Einstellungen -> Codes/Smilies in den Feldern unter "Hinzufügen eines neuen Forumcodes" der neue Foren-Code [spoiler] mit:
Zuletzt wird unter Admin -> Einstellungen -> Symbol-Bar die Symbol-Bar ergänzt, damit auch die Foren-Mitglieder die Funktion nutzen können. Dazu einfach an geeigneter Steller diese Zeile einfügen:
<A HREF="javascript:insert('[spoiler]','[/spoiler]')"><img src="http://www.bilder-hochladen.net/files/585t-5.png" alt="[spoiler] versteckter Text [/spoiler]" border=0 width="48" height="17"></A>
z.B. direkt über:
<A HREF="javascript:insert('[b]','[/b]')"><img src="http://img.homepagemodules.de/b2.gif" alt="[b] Text [/b]" border=0 width="21" height="18"></A>
Gibt es so eine Möglichkeit auch für den "Spoiler-Button"?
Ich würde, wenn möglich die Aufklappmenüs's nach der Funktionsweise des Spoilerbutton umbauen. So wie oben der Test-Link. Einen Ansatz habe ich schon gemacht. Nur fehlt jetzt das "Schließen" bei langen Texten. Hast Du eine Idee?
[spoiler]
Test
<<< Hier anklicken!
Ich habe einige Veränderungen vorgenommen: 1. Alle "div's" gegen "span's" ausgetauscht. Das hat den Vorteil, das man neben dem Spoilerbutton etwas schreiben kann. Ansonsten erfolgt mit "div" ein Zeilenumbruch und der Text landet unter dem Button.
2. "input" um den Befehl onmouseover="this.style.cursor='pointer';" erweitert. Das hat den Vorteil, das der Mauszeiger wie bei einem Link, zur "Hand" wird.
Hat 'ne ganz schöne Weile gedauert. Ich habe kein JavaScript gelernt und taste mich seit noch nicht so langer Zeit immer ein wenig näher 'ran. Hauptsächlich, seit ich das Forum habe. Nach etlichen Fehlversuchen geht es jetzt!
Der Spoiler-Button ist fertig! Ich habe ihn schon ein wenig getestet. Er müsste soweit funktionieren. Kleines Manko: Beim editieren werden nicht die Foren-Codes angezeigt, sondern der HTML-Code. Die Idee, dass sich der Cursor verändert, finde ich gut! Allerdings ist im Moment die Zeile für die Foren-Codes im Admin-Menü nicht ausreichend genug. Bei Verwendung wird benötigter Code einfach abgeschnitten und es funktioniert nicht mehr. Ich persönlich würde es weglassen, anstatt drei oder vier Foren-Codes einfügen zu müssen, aber das ist Geschmackssache. Evtl. lassen sich diese kleinen Unfeinheiten noch beheben.
Spoiler einbauen:
Im Template-Element Obere Leiste zwischen den Head-Tags dieses JavaScript einfügen:
Man müsste es auch im Header eingeben können. Ich habe es kurz ausprobiert. Ich finde im Template stört es weniger. Wenn Span-Tags verwendet werden sollen, müssten auch hier im Skript alle DIVs durch Span ersetzt werden. Das habe ich noch nicht getestet. Werde es später aber vielleicht auch selbst verwenden. Nachdem der Spoiler einmal geklickt wurde, erscheinen die Texte "Show" und "Hide", je nach Situation. Wenn stattdessen immer "Spoiler" angezeigt werden soll, müssen die betreffenden Code-Stellen entfernt werden. Leichter wäre es aber auch, einfach "Show" und "Hide" auch in "Spoiler" zu ändern.
Die Foren-Codes können natürlich auch anders gewählt werden. Aber ich verwende diese beim Code für die Symbol-Bar! Auch hier können die DIVs durch Span ersetzt werden. Wenn der "ausblenden"-Button am Ende woanders positioniert werden soll, muss zuerst der Code ein wenig umgeschrieben werden! Es wird mit Position-Änderung nicht sofort funktionieren!
In der Symbol-Bar noch die Codes bereitstellen:
<A HREF="javascript:insert('[spoiler]','[/spoiler]')"><img src="http://www.bilder-hochladen.net/files/585t-5.png" alt="[spoiler] versteckter Text [/spoiler]" border=0 width="48" height="17"></A>
Das war's! Der Spoiler-Button müsste nun funktionieren! Bitte einmal austesten und evtl. Verbesserungen für das Problem beim Edit oder mit dem Mouse-Over mitteilen. Ich hoffe, dass sonst alles Ordnungsgemäß funktioniert. Viel Spaß beim Testen und anwenden!
Offline
wolf.andres!
