A16 – Bonus: jQuery UI Widgets

Aufgabe A16

Teil A – Accordion auf feuer.html

Ein Accordion zeigt mehrere Abschnitte untereinander, von denen immer nur einer aufgeklappt ist. Ideal für die Feuer-Seite, um die verschiedenen Themenabschnitte (Was ist Feuer?, Kulturgeschichte, Physikalische Daten) platzsparend darzustellen.

jQuery UI Accordion erwartet einen Container-<div>, in dem sich jeweils eine Überschrift (<h3>) und ein direkt folgendes Inhalts-<div> abwechseln:

<div id="feuer-accordion">

    <h3>Was ist Feuer?</h3>
    <div>
        <p>… dein bisheriger Text aus diesem Abschnitt …</p>
    </div>

    <h3>Bedeutung in der Kulturgeschichte</h3>
    <div>
        <p>… </p>
    </div>

    <h3>Physikalische Daten</h3>
    <div>
        <p>… </p>
    </div>

</div>

Aktiviere das Widget mit folgendem Script am Ende der Seite, direkt vor </body>:

<script>
    $('#feuer-accordion').accordion();
</script>

Ersetze auf feuer.html deine bisherigen <h2>-Abschnitte durch diese Accordion-Struktur. Beachte: jQuery UI Accordion verwendet <h3> als Überschriften – die bisherige <h1> der Seite bleibt davon unberührt.

Teil B – Tabs auf erde.html

Tabs funktionieren wie Karteireiter: verschiedene Inhalte teilen sich denselben Platz, der Benutzer wechselt per Klick zwischen ihnen. Auf der Erde-Seite bietet sich eine Unterteilung in z. B. „Eigenschaften", „Bodenarten" und „Fachbegriffe" an.

jQuery UI Tabs erwartet eine <ul>-Navigation, deren <a href>-Links auf ids von Inhalts-<div>s innerhalb desselben Containers verweisen:

<div id="erde-tabs">

    <ul>
        <li><a href="#tab-eigenschaften">Eigenschaften</a></li>
        <li><a href="#tab-bodenarten">Bodenarten</a></li>
        <li><a href="#tab-begriffe">Fachbegriffe</a></li>
    </ul>

    <div id="tab-eigenschaften">
        <p>… deine bisherige Eigenschaften-Liste …</p>
    </div>

    <div id="tab-bodenarten">
        <p>… deine bisherige Bodenarten-Liste …</p>
    </div>

    <div id="tab-begriffe">
        <p>… deine bisherige Definitionsliste …</p>
    </div>

</div>

<script>
    $('#erde-tabs').tabs();
</script>

Verschiebe die Inhalte deiner bestehenden Abschnitte in die jeweiligen Tab-Divs. Die href-Werte in der Navigation (#tab-eigenschaften usw.) müssen exakt mit den id-Werten der Inhalts-Divs übereinstimmen.

Teil C – Tooltip auf luft.html

Ein Tooltip zeigt beim Hover über ein Element einen erklärenden Hinweistext an. Auf der Luft-Seite eignet sich das gut für die Fachbegriffe in der Tabelle – z. B. um „Troposphäre" oder „Argon" kurz zu erklären, ohne den Tabelleninhalt aufzublähen.

jQuery UI Tooltip verwendet das standard-HTML-Attribut title als Tooltiptext. Du musst lediglich dem gewünschten Element ein title-Attribut geben und das Widget auf einem Container (oder der gesamten Seite) aktivieren:

<td title="Unterste Schicht der Atmosphäre, in der das Wetter stattfindet.">
    Troposphäre
</td>

<td title="Edelgas, reaktionsträge, dritthäufigster Bestandteil der Luft.">
    Argon (Ar)
</td>

<script>
    $(document).tooltip();
</script>

Ergänze title-Attribute bei mindestens vier Zellen oder Begriffen in deinen Tabellen. $(document).tooltip() aktiviert Tooltips für alle Elemente mit title-Attribut auf der gesamten Seite.

Hinweis: Das title-Attribut existiert in HTML schon lange und zeigt in den meisten Browsern auch ohne jQuery UI einen einfachen Tooltip an – jQuery UI ersetzt diesen durch eine ansprechendere, gestylte Variante.

Teil D – Dialog (Modal) auf wasser.html

Ein Dialog ist ein modales Fenster, das sich über den Seiteninhalt legt und eine Nachricht oder weiterführende Information anzeigt. Auf der Wasser-Seite könnte ein Button einen Hinweis zur Wasserknappheit als Dialog öffnen.

jQuery UI Dialog benötigt ein <div> mit dem Dialoginhalt (standardmäßig versteckt) und einen Button, der ihn öffnet:

<!-- Der Dialog-Inhalt – wird beim Laden der Seite nicht angezeigt -->
<div id="wasser-dialog" title="Wasser weltweit">
    <p>
        Rund 2,2 Milliarden Menschen haben keinen sicheren Zugang zu
        sauberem Trinkwasser. Nur 3&nbsp;% des Wassers auf der Erde
        sind Süßwasser – der größte Teil davon ist in Gletschern gebunden.
    </p>
    <p>
        <a href="https://www.un.org/waterforlifedecade/" target="_blank">
            Mehr Infos: UN Water
        </a>
    </p>
</div>

<!-- Der Button, der den Dialog öffnet -->
<button id="dialog-oeffnen">💧 Wasser weltweit</button>

<script>
    // Dialog initialisieren – autoOpen: false = bleibt zunächst geschlossen
    $('#wasser-dialog').dialog({
        autoOpen: false,
        modal: true,
        width: 400,
        buttons: {
            'Schließen': function () {
                $(this).dialog('close');
            }
        }
    });

    // Button öffnet den Dialog
    $('#dialog-oeffnen').on('click', function () {
        $('#wasser-dialog').dialog('open');
    });
</script>

Platziere den Button an einer sinnvollen Stelle im Fließtext der Wasser-Seite, z. B. nach dem Abschnitt über das Vorkommen von Wasser auf der Erde. Das title-Attribut des Dialog-Divs erscheint als Titelzeile des modalen Fensters.