Interaktionselemente mit jQuery

Einleitung

jQuery ist eine JavaScript-Bibliothek für interaktive Elemente einer HTML-Seite. Seiten können damit durch sinnvolle Interaktionselemente wesenlich besser strukturiert werden, da nicht alle Informationen wie in statischer Dokumentenform -einmalig gelayoutet und ausgegeben- präsentiert werden, sondern dynamsiche und interaktive Ziele verfolgt für:

  1. Priorisierung in wichtige und unwichtige Informationen. Unwichtige Informationen können in der Primärdarstellung ausgeblendet und durch Benutzerinteraktion im Sinne von Zusatzinformationen eingeblendet werden.
  2. Lange schematische Ausgaben von z.B. Listen oder Strukturen können primär zusammengeklappt ausgegeben werden und erst durch Benutzerinteraktion entfaltet werden.
  3. Automatismen wie z.B. eine Diashow.

jQuery empfehlen wir in diesem Stadium nur erfahrenen Benutzern, da häufig direkt im HTML-Code regulierend eingegriffen werden muss.

 

↑ Inhaltsverzeichnis



Voraussetzung und Einbindung

Die Einbindung der jQuery-Elemente geschieht über die HTML-Galerie "RUS Dynamische Interaktionselemente (jQuery)". Die Elemente in der Galerie haben den gleichen schematischen Aufbau: sie bestehen aus einem sichtbaren Inhaltselement und einem anschließendem JavaScript-Aufruf, der das dynamische Verhalten regelt. Wichtig ist dabei, dass dieses Konstrukt erhalten bleibt und keinesfalls durch eingefügte Elemente umgruppiert wird. Sie sehen dies zwei Elemente in den jeweiligen HTML-Code-Abschnitt zu den jeweiligen jQuery-Elementen.

Ihre Herausforderung liegt vor allem darin, den Blindtext des Galerieelements durch Ihren Inhalt zu ersetzen, ohne dabei das nachfolgende JavaScript-Tag zu verändern.

↑ Inhaltsverzeichnis



Element "Tabsheet"

Tabsheets sind eines der wichtigsten GUI-Elemente, um unzählige Eingabefelder oder Texte sinnvoll gruppieren zu können. Es gibt kein vergleichbares Element in den HTML-Standards des W3C. Daher umso wichtiger diese Gruppierung als dynamisches HTML-Element nachgebaut zu erhalten.

Demo:
 

Tabs
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.

HTML-Markup:

<!-- Beginn Tabs -->
<h6>Tabs</h6>
<div class="rus-tabs">
        <ul>
                <li><a href="#tabs-1">First</a></li>
                <li><a href="#tabs-2">Second</a></li>
                <li><a href="#tabs-3">Third</a></li>
        </ul>
        <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
        ex ea commodo consequat.</div>
        <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit 
        id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. 
        Fusce sed lorem in enim dictum bibendum.</div>
        <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, 
        felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat 
        vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>
<!-- Ende Tabs -->

↑ Inhaltsverzeichnis



Element "Aufklappbox"

Sie haben eine Überschrift und einen Absatz. Sie möchten den Absatz zuerst verbergen und durch Klick auf die Überschrift öffnen bzw. schließen.

Demo:  

Überschrift

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

HTML-Code:

<!-- Beginn Aufklappbox -->
<h6 class="slide">Überschrift</h6>
<p class="slide-content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
        aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
        duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
        sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
        ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero 
        eos et accusam et justo duo dolores et ea rebum. Stet clita kasd 
        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<!-- Ende Aufklappbox -->
 

↑ Inhaltsverzeichnis



Element "Akkordion"

Das Akkordion ist eine Variante der Aufklappbox für mehrere Elemente, die eine gegenseitige Abhängigkeit haben: es kann nur ein Element geöffnet sein. Durch Klick auf ein neues Element schließt das bisherige und der neue Inhalt öffnet sich.

Demo:

Accordion
First
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Second
Phasellus mattis tincidunt nibh.
Third
Nam dui erat, auctor a, dignissim quis.

Szenario:
Wiederholung mehrer Aufklappboxen, jedoch mit gegenseitiger Abhängigkeit, sodass immer nur ein Element geöffnet erscheint.

HTML-Code:

<!-- Beginn Akkordion -->
<h5>Accordion</h5>
<div class="rus-accordion">
        <div>
                <h6><a href="#">First</a></h6>
                <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 
                Lorem ipsum dolor sit amet.</div>
        </div>
        <div>
                <h6><a href="#">Second</a></h6>
                <div>Phasellus mattis tincidunt nibh.</div>
        </div>
        <div>
                <h6><a href="#">Third</a></h6>
                <div>Nam dui erat, auctor a, dignissim quis.</div>
        </div>
</div>
<!-- Ende Akkordion -->

↑ Inhaltsverzeichnis



Bildervorschau

Mit JavaScript ist es möglich eine Bildervorschau zu erzeugen. Dabei soll auf der Seite nur ein kleines Vorschaubild angezeigt werden und beim Klicken auf das betreffende Bild, wird das Bild in voller Größe zentriert auf dem Bildschirm angezeigt. Es ist außerdem möglich die Bilder zu gruppieren, um zwischen den Bildern wechseln können.

Demo:

HTML-Code:

<p class="rus-gallery">
  <a title="Eifelturm"
  href="/info/dokumentation/seitentypen/fotostrecke/DSCF0107.JPG?__scale=w:600,h:450"
  rel="group1" class="rus-popup-image"><img width="200" height="150" alt="Eifelturm"
  src="/info/dokumentation/seitentypen/fotostrecke/DSCF0107.JPG?__scale=w:200,h:150"
  /></a>
  <a title="Aussicht"
  href="/info/dokumentation/seitentypen/fotostrecke/DSCF0048.JPG?__scale=w:600,h:450"
  rel="group1" class="rus-popup-image"><img width="200" height="150" alt="Aussicht"
  src="/info/dokumentation/seitentypen/fotostrecke/DSCF0048.JPG?__scale=w:200,h:150"
  /></a></p>

 Die einzelnen Bilder können mit rel="group" gruppiert werden.

 

↑ Inhaltsverzeichnis



Text Slideshow

Der Vorteil gegenüber Grafiken mit Textinhalt ist, dass die Informationen für Screenreader lesbar sind. Wichtig für die Barrierefreiheit der Seiten! Trotzdem sparsam verwenden.

Demo:

  • Das ist die erste Meldung Lorem ipsum
  • Und hier eine zweite Lorem ipsum
  • Die dritte folgt Lorem ipsum ipsum
  • Vierte Lorem ipsum Lorem ipsum ipsum
  • Fünfte Lorem ipsum Lorem ipsum ipsum
 

HTML Code:

<div style="clear:both;">
        <ul style="margin-left:20px;" id="fade" class="textslideshow">
                <li>Das ist die erste Meldung Lorem ipsum</li>
                <li>Und hier eine zweite Lorem ipsum</li>
                <li>Die dritte folgt Lorem ipsum ipsum</li>
                <li>Vierte Lorem ipsum Lorem ipsum ipsum</li>
                <li>Fünfte Lorem ipsum Lorem ipsum ipsum</li>
        </ul>
</div>
<div style="clear:both">&nbsp;</div>

Anmerkung: die Formatierung also Aussehen dieser Slideshow können Sie über CSS ändern. Sie müssen dazu lediglich in Ihrer css/realm_xhtml_2.0.css Datei die Eigenschaften anpassen/überschreiben:

/* Liste für Text Slideshow */
#text ul.textslideshow {
        background: #efe8e4;
        color: #600;
        padding: 10px 20px;
        border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        width: 200px;
}
#text ul.textslideshow li {
        list-style: none;
        font-size: 1.3em;
}

↑ Inhaltsverzeichnis



Verschachtelte Elemente

Wir empfehlen nicht die Verschachtelung von Elementen. Theoretisch ist dies möglich, birgt aber die oben genannten Risiken durch manuelle Code-Editierung notwendig zusammenhängende Tags in ihrer Struktur zu zerstören.

↑ Inhaltsverzeichnis