Benutzer:Dirk123456/Baustellenbaustelle 001/Baustelle-A/Baustelle-A.13

aus Wikipedia, der freien Enzyklopädie
Zur Navigation springen Zur Suche springen
Ein- und Ausklappen, wie geht das?

Das Beispiel ist der Seite:

entnommen. Dort stand Folgendes: 

<includeonly><div class="NavFrame" style="text-align: left;"><div class="NavHead">{{{1}}}</div><div class="NavContent">
<div style="background-color: #e8e6e0; border: 1px solid #202020; color: #181818; overflow: hidden; padding: 1ex 1em;"></includeonly><noinclude>
Erzeugt einen ausklappbaren, ausgegrauten Bereich.
Verwendung:
{{TechnischeWunschlisteArchivBoxStart/Doku}}
</noinclude>

Hier kommen jetzt noch drei schließende div-Tags, um die Graufärbung (#e8e6e0), den Inhalt ("NavContent") und die Box ("NavFrame") abzuschließen.

Wo kommt "NavFrame" her?

MediaWiki:Common.js -->

  • ...
  • mw.loader.using( [ ...
    • var ...
    • function toggleNavigationBar(NavToggle, NavFrame)
    • { ...
    • }
    • function toggleNavigationBarFunction(NavToggle, NavFrame) {
    • ...
    • }
    • var ...
    • for (var i=0; i<NavFrames.length; i++) {
    • ...
  • })});
  • //================================================================================
  • ...
Ein- und Ausklappen - Beispiel ohne Zusatz-Styles

Das Beispiel ist der Seite:

entnommen. Es werden hier keine zusätzlichen Styles verwendet; also nicht:

style="..."
  • sondern nur die Klassen:
  • <div class="NavFrame">
  • <div class="NavHead">...</div>
  • <div class="NavContent">
  • ...
  • </div></div>

Hier kommen jetzt noch zwei schließende div-Tags.

a
[Bearbeiten | Quelltext bearbeiten]

Man kann die "div class"-Sachen nur bedingt formatieren, weil bedingt durch "style=" formatieren, weil Javascript arbeitet. So wird für die class="NavFrame"-, "NavHead"- und <div class="NavContent"-style-Angaben außen etwas anderes angezeigt als innen.

Beispiel als Code: 

<div class="NavFrame" style="border-color:#e0eee0; padding:5px; padding-bottom:0px; background:#f0fff0;">
<div class="NavHead" style="background:#e0eee0;">Ein- und Ausklappen - Beispiel mit Zusatz-Styles</div>
<div class="NavContent" style="background:#FFFFFF;>
{| class="wikitable" style="background:#FFFFFFF;"
|-
| Ein wenig Text in der Tabelle
|}
<div class="NavFrame" style="margin-left:5px; border-color:#eec0a0; padding:5px; padding-bottom:0px; background:#ffe0c0;">
<div class="NavHead" style="background:#FFFFFF;">Ein- und Ausklappen - Beispiel mit Zusatz-Styles</div>
<div class="NavContent" style="background:#FFFFFF;">
Innerer Text
</div></div>
* Hier kommen jetzt noch zwei schließende div-Tags.
</div></div>

Beispiel formatiert:

Start

Ein- und Ausklappen - Beispiel mit Zusatz-Styles
Ein wenig Text in der Tabelle
Ein- und Ausklappen - Beispiel mit Zusatz-Styles

Innerer Text

  • Hier kommen jetzt noch zwei schließende div-Tags.

Ende

b
[Bearbeiten | Quelltext bearbeiten]

Text der Anwendung (nowiki-Tags):

<div style="display:none; margin-left:5px; border:solid; border-color:#eec0a0; padding:5px; padding-bottom:0px; background-color:#ffe0c0;">

Text 1

Text 2

</div>

Anwendung des Textes als Wikitext:


Text 1

Text 2

Ende.

c
[Bearbeiten | Quelltext bearbeiten]

Ein wenig Text 1a

Ein wenig Text 2a

Ein wenig Text 3a

Ein wenig Text 4a

bla

bla

bla

Ein wenig Text 4z

Ein wenig Text 3z

Ein wenig Text 2z

Ein wenig Text 1z

Wenn man nur die div-Tags mit class="NavFrame" verwendet, kann man zwar aus-und einklappen, die Ansicht ändert sich aber kaum.

 Info: Man sollte diese Naviboxen möglichst „nicht“ ineinander schachteln sondern untereinander setzen, es gibt zudem noch eine hilfreiche Vorlage:NavFrame mit Vorlage:NavFrame/Ende

Ein wenig Text 1a … Ein wenig Text 1z

Ein wenig Text 2a … Ein wenig Text 2z

Ein wenig Text 3a … Ein wenig Text 3z

Ein wenig Text 4a

bla

bla

bla

Ein wenig Text 4z

d
[Bearbeiten | Quelltext bearbeiten]
Kopf 1

Ein wenig Text 1a

Kopf 2

Ein wenig Text 2a

Kopf 3

Ein wenig Text 3a

Kopf 4

Ein wenig Text 4a

bla

bla

bla

Ein wenig Text 4z

Ein wenig Text 3z

Ein wenig Text 2z

Ein wenig Text 1z

Wenn man die div-Tags mit class="NavFrame" und class="NavHead" verwendet, wird ein grauer Hintergrund eingezogen und das Einklappen funktioniert nicht wirklich.

e
[Bearbeiten | Quelltext bearbeiten]
Kopf 1

Ein wenig Text 1a

Kopf 2

Ein wenig Text 2a

Kopf 3

Ein wenig Text 3a

Kopf 4

Ein wenig Text 4a

bla

bla

bla

Ein wenig Text 4z

Ein wenig Text 3z

Ein wenig Text 2z

Ein wenig Text 1z

Wenn man die div-Tags mit class="NavFrame", class="NavHead" und class="NavContent" verwendet, dann funktioniert es.

Beispiel mit Vorlagen

Kopf 1 text rechts

Ein wenig Text 1a Ein wenig Text 1z

Kopf 2 mit Tabelle im Inneren
Text der Überschrift
Überschrift Überschrift Überschrift
Beispiel Beispiel Beispiel
Beispiel Beispiel Beispiel
Beispiel Beispiel Beispiel
Kopf 3 blaer Hintergrund auch innen

Ein wenig Text 3a

Ein wenig Text 3z

Kopf 4 Text links

Ein wenig Text 4a

bla

bla

bla

Ein wenig Text 4z

Abgerufen von „https://de.wikipedia.org/w/index.php?title=Benutzer:Dirk123456/Baustellenbaustelle_001/Baustelle-A/Baustelle-A.13&oldid=202109550“