Nach einer einwöchigen Auszeit möchte ich euch heute gerne eine weitere Funktion aus den Reihen der jQuery Tools erläutern. Nachdem ich bereits die Tabs und die Tooltips etwas näher erläutert habe, werde ich heute die Scrollable Funktion erklären.

Was bedeutet Scrollable? Im Grunde ist es versteckter Content, der durch eine Scrollfunktion sichtbar gemacht wird. Optimale Einsatzgebiete dafür sind Bildergalerien oder Newsticker. So wird der Fokus auf ein Thema oder eine begrenzte Anzahl an Fotos gelegt – sollte einen User dies nicht für Interessant halten, kann er mit einem klick andere Themen und Bilder sichtbar machen. Insgesamt eine sehr schöne und imposante Funktion, welche den Content auf Seiten deutlich lebendiger werden lässt.

Impressionen

Da man diese Funktion mit Bildern nur schlecht präsentieren kann, erläutere ich in diesem Fall nur anhand von Beispielen den Einsatz.

Coda
Optimal nutzt wieder einmal Panic’s Coda diese Funktion. Coda hat die eigene Seite in 7 Bereiche aufgeteilt, welche alle Informationen zu der Software abdecken. Möchte man nun Wissen wie der Editor funktioniert, klickt man auf den Menüpunkt und der Inhalt “rutscht” von rechts nach Links in den Fokus. Also alle Informationen schnell an der Hand ohne die Seite neu laden zu müssen.

Chukki.de
Auf Chukki.de wird diese Funktion ebenfalls im Kopfbereich genutzt. Als Vorschau für den Wordpress Theme Download habe ich einige Bilder hinterlegt welche abwechselnd dargestellt werden.

jQuery Tools Example
Im Beispielbereich der jQuery Tools ist ein Anmeldungs Formular mit mehreren schritten, welche Step-by-Step abgearbeitet werden, erläutert. Hier wird im ersten Schritt der Benutzername eingegeben und wenn alle Informationen ausgefüllt sind kann zum nächsten Schritt “gerutscht” werden bis die Anmeldung abgeschlossen ist.

Erläuterung

Natürlich ist wieder die jQuery Tools Library nötig um folgendes Script zu verwenden. Der Download ist nach wie vor auf der jQuery Tools Seite zu finden

JavaScript

<script type="text/javascript">
$(document).ready(function(){
    $("div.scrollable").scrollable();
});
</script>

Dieses Stück Quelltext besagt das auf den Div Container mit der Klasse “scrollable” die Funktion Scrollable ohne jegliche weiteren Parameter angewendet werden soll. Das ist es im groben auch schon was man dafür brauch. Aber auch hier bieten die jQuery Tools viele viele Parameter mit denen man die Funktion weiter anpassen kann.

So kann man mit “size” die Größe der Schritte angeben, mit “vertical” ob das Scrollen statt horizontal vertikal ausgeführt werden soll und mit “items” welche Klasse die Bilder oder Texte beinhalten soll. Dies kann z.B. so aussehen:

<script type="text/javascript">
$(document).ready(function(){
    $("div.scrollable").scrollable({size: 1, vertical: true, loop: true});
});
</script>

Diese Parameter verändern das Scrollable dahin das nur 1 Bild weiter gescrollt wird, dabei aber Vertikal anstatt Horizontal und das wenn das letzte Element erreicht ist, wieder vorne begonnen werden soll.

Was brauchen wir an HTML und CSS um das ganze zu realisieren?

HTML

<!-- vorige Seite Button (wird mit CSS gestylet) -->
<a class="prevPage browse left"></a>
<!-- Die Scrollable haben wir im JavaScript Code als zu Scrollendes Objekt ausgewählt und muss den Rest beinhalten  -->
<div class="scrollable">
    <!-- Die Klasse "items" beinhaltet immer alle Bilder, es sei denn ein anderes Parameter ist angegeben -->
<div class="items">
        <img src="http://example.com/bild1.jpg" />
        <img src="http://example.com/bild2.jpg" />
        <img src="http://example.com/bild3.jpg" />
        <img src="http://example.com/bild4.jpg" />
        <img src="http://example.com/bild5.jpg" />
    </div>
</div>
<!-- nächste Seite Button (wird mit CSS gestylet) -->
<a class="nextPage browse right"></a>

CSS

div.scrollable {
    position:relative;
    overflow:hidden;
    width: 660px;
    height:90px;
}
div.scrollable div.items {
    width:20000em;
    position:absolute;
} 

Dieser CSS Code sagt das alles was in der Scrollable Klasse überhängt abgeschnitten werden soll. Die Items werden absolut positioniert und haben eine riesige Breite damit der komplette Inhalt nebeneinander dargestellt werden kann. Dadurch das Scrollable auf eine Breite von 660px begrenzt ist, gibt es hier keine Darstellungsprobleme.

Alles weitere an Feintuning entnehmt ihr wie immer der jQuery Tools Seite oder einem Beitrag auf noupe.com, welche ebenfalls die Funktionen sehr gut erläutert. Bei Fragen einfach ein Kommentar schreiben oder mich über Twitter kontaktieren.

Tags: JavaScript, jQuery, jQuery Tools, Scrollable, Tutorial