Pinned Anleitung - Verwendung der BBCodes "Tab-Menü" und "Fortschrittsbalken"

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • Anleitung - Verwendung der BBCodes "Tab-Menü" und "Fortschrittsbalken"

    Verwendung von Tab-Menüs

    Zur übersichtlichen Darstellung von Großen Mengen an Informationen können Tab-Menüs verwendet werden. Hierbei wird eine Vielzahl von Informationen und Grafiken in unterschiedlichen Fenstern dargestellt, welche jeweils mit einem Klick auf verschiedene Reiter geöffnet werden können. Zur Darstellung der Tab-Menüs muss JavaScript aktiviert sein - ansonsten werden die einzelnen Tabs jediglich untereinander dargestellt.

    Grundlage einer Tab-Menüs ist nachfolgender Befehl:

    Source Code

    1. [tabmenu]
    2. [/tabmenu]


    Mittels dem Befehl "Tab" können im Tab-Menü beschriftete Reiter und die jeweils dazugehörigen Inhalte eingefügt werden. "Tab1" bildet dabei immer die Bezeichnung des Reiters, an der Stelle von "Inhalt 1" kann der jeweilige Inhalt hinzugefügt werden.

    Source Code

    1. [tabmenu]
    2. [tab='Tab1']
    3. Inhalt 1
    4. [tab='Tab2']
    5. Inhalt 2
    6. [tab='Tab3']
    7. Inhalt 3
    8. [/tabmenu]



    Inhalt 1


    Inhalt 2


    Inhalt 3



    Analog zu den Hauptreitern bietet die Funktion die Möglichkeit, so genannte Subtabs mit dem Befehl "Subtab" zu einem Reiter hinzuzufügen.

    Source Code

    1. [tabmenu]
    2. [tab='Tab1']
    3. [subtab='Tab1.1']
    4. Inhalt 1.1
    5. [subtab='Tab 1.2']
    6. Inhalt 1.2
    7. [subtab='Tab 1.3']
    8. Inhalt 1.3
    9. [tab='Tab2']
    10. [subtab='Tab2.1']
    11. Inhalt 2.1
    12. [subtab='Tab 2.2']
    13. Inhalt 2.2
    14. [subtab='Tab 2.3']
    15. Inhalt 2.3
    16. [tab='Tab3']
    17. Inhalt 3
    18. [/tabmenu]
    Display All



    Inhalt 3



    Die jeweiligen Reiter und Subtabs können auch mit kleinen Grafiksymbolen ausgestattet werden. Hierzu muss durch ein "Komma" getrennt der Link zur jeweiligen Grafik direkt an die Beschriftung des jeweiligen Tabs angefügt werden.

    Source Code

    1. [tabmenu]
    2. [tab='Tab1',http://www.emergency-forum.de/icon/indexM.png]
    3. [subtab='Tab1.1',http://www.emergency-forum.de/wcf/icon/infoM.png]
    4. Inhalt 1.1
    5. [subtab='Tab 1.2',http://www.emergency-forum.de/wcf/icon/infoM.png]
    6. Inhalt 1.2
    7. [tab='Tab2',http://www.emergency-forum.de/icon/indexM.png]
    8. [subtab='Tab2.1',http://www.emergency-forum.de/wcf/icon/infoM.png]
    9. Inhalt 2.1
    10. [subtab='Tab 2.2',http://www.emergency-forum.de/wcf/icon/infoM.png]
    11. Inhalt 2.2
    12. [/tabmenu]
    Display All


  • Verwendung von Fortschrittsbalken

    Zur Darstellung des Arbeitsforschritts von verschiedenen Teilprojekten oder des gesamten Fortschritts einer Modifikation bietet sich die Verwendung von Fortschrittsbalken kann. Diese Balken veranschaulichen grafisch den Fortschritt eines bestimmten Prozesses.

    Grundlage eines Fortschrittbalkens ist nachfolgender Befehl:

    Source Code

    1. [progressbar][/progressbar]


    Zur Darstellung des Fortschritts können Zahlen von 1 - 100 verwendet werden:

    Source Code

    1. [progressbar=1][/progressbar]
    2. [progressbar=25][/progressbar]
    3. [progressbar=50][/progressbar]
    4. [progressbar=75][/progressbar]
    5. [progressbar=100][/progressbar]


    1%

    25%

    50%

    75%

    100%


    Innerhalb des jeweiligen Balkens kann zudem ein Text eingefügt werden. Hinter den jeweiligen Text wird automatisch ein Doppelpunkt eingefügt:

    Source Code

    1. [progressbar=20]Fahrzeuge[/progressbar]
    2. [progressbar=40]Personen[/progressbar]
    3. [progressbar=80]Scripte[/progressbar]
    4. [progressbar=100]Einsatzkarte[/progressbar]


    Fahrzeuge: 20%

    Personen: 40%

    Scripte: 80%

    Einsatzkarte: 100%


    Um die Kennzeichnung des jeweiligen Fortschritts besser zu darzustellen, kann die Balkenfarbe angepasst werden. Zur Bestimmung der jeweiligen Farbwerte werden so genannte hexadezimale Farbcodes benötigt. Um eine einheitliche Darstellung zu gewährleisten, empfehlen wir folgende Farbcodierung:

    [table='Prozentwerte,Farbcode']
    [*] 0-25 % [*] #ff0000
    [*] 26 - 75 % [*] #FF8800
    [*] 76 - 99 % [*] #FFFF00
    [*] 100 % [*] #00FF00
    [/table]


    Source Code

    1. [progressbar=20,#ff0000]Fahrzeuge[/progressbar]
    2. [progressbar=40,#FF8800]Personen[/progressbar]
    3. [progressbar=80,#FFFF00]Scripte[/progressbar]
    4. [progressbar=100,#00FF00]Einsatzkarte[/progressbar]


    Fahrzeuge: 20%

    Personen: 40%

    Scripte: 80%

    Einsatzkarte: 100%


    Zur weiteren Individualisierung kann außerdem die Textfarbe angepasst werden:

    Source Code

    1. [progressbar=100,#FFFFFF,#000000]Fahrzeuge[/progressbar]
    2. [progressbar=100,#000000,#FFFFFF]Einsatzkarte[/progressbar]


    Fahrzeuge: 100%

    Einsatzkarte: 100%