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

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Dienste bereitzustellen und die Zugriffe auf unsere Website zu analysieren. Außerdem werden durch unsere Partner Informationen zu Ihrer Nutzung für soziale Medien, Werbung und Analysen erfasst. Weitere Informationen

  • 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:

    Quellcode

    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.

    Quellcode

    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.

    Quellcode

    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]
    Alles anzeigen



    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.

    Quellcode

    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]
    Alles anzeigen


  • 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:

    Quellcode

    1. [progressbar][/progressbar]


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

    Quellcode

    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:

    Quellcode

    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]


    Quellcode

    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:

    Quellcode

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


    Fahrzeuge: 100%

    Einsatzkarte: 100%