JavaScript & jQuery

Toolbar.js für jQuery und Bootstrap: Flexible Werkzeugleisten im iOS-Look

5. Februar 2013
von

Ob man den Designstil des iOS mag oder nicht, spielt hier keine Rolle. Unabhängig von der aktuellen Diskussion um Skeuomorphismus wird man schnell Einigkeit darüber erzielen, dass das Toolbardesign aus Apples mobilem OS wegweisend für moderne Websites ist. Ein Tapp auf ein Icon oder einen Link bringt häufig weitere Auswahlmöglichkeiten ans Licht. Das spart Platz und ist mittlerweile etabliert. Das jQuery-Plugin Toolbar.js des Neuseeländers Paul Kinzett erlaubt die Verwendung auf beliebigen Websites und ist dabei wirklich extrem einfach im Einsatz.

Toolbar.js für jQuery

Werkzeugleisten im iOS-Look mit den Glyphicons aus Twitters Bootstrap

Toolbar.js für jQuery bietet eine sehr einfache, dabei sehr elegante Möglichkeit, Toolbars, sowohl vertikal, wie auch horizontal an beliebige Elemente zu hängen. Beliebig viele dieser Werkzeugleisten lassen sich so erzeugen. Kinzett verwendet das Iconset, sowie das dazugehörige CSS aus Twitters Bootstrap. Auf diese Weise verhalten sich die Toolbars zum einen responsiv, zum anderen sind sie mit den Bootstrap-Methoden anpassbar.

Mit hunderten von Symbolen dürften sich auch die ausgefallensten Werkzeugleisten umsetzen lassen. Die Vorgehensweise ist jQuery-Enthusiasten bekannt. Zunächst gilt es, das JavaScript zu implementieren:

1
2
<script src="jquery.min.js"></script>
<script src="jquery.toolbar.js"></script>

Danach bringen wir die Stylesheets für die Toolbar, wie für die Bootstrap Icons unter:

1
2
<link href="jquery.toolbar.css" rel="stylesheet" />
<link href="bootstrap.icons.css" rel="stylesheet" />

Im Anschluss muss noch die Toolbar definiert werden. Das kann beispielsweise so aussehen:

1
2
3
4
5
6
7
<div id="user-toolbar-options">
    <a href="#"><i class="icon-user"></i></a>
    <a href="#"><i class="icon-star"></i></a>
    <a href="#"><i class="icon-edit"></i></a>
    <a href="#"><i class="icon-delete"></i></a>
    <a href="#"><i class="icon-ban"></i></a>
</div>

Sie sehen, dass die Icons über die entsprechenden Klassen aus Bootstrap zugewiesen werden. Die Aktionen, die damit verbunden werden sollen, finden ihren Platz in entsprechenden A-Elementen. Schlussendlich wird die so definierte Toolbar an das entsprechende Element gehängt, welches für den Aufruf verantwortlich sein soll.

1
 $('#element').toolbar( options );

Options sind die Position der Leiste, als da wären über oder unter dem Element horizontal oder links oder rechts von dem Element vertikal.

Diese Definition:

1
2
3
4
$('#vertical-toolbar').toolbar({
    content: '#user-toolbar-options', 
    position: 'right'
});

führt zu dieser Optik:

Vertikale Toolbar

Während diese Definition:

1
2
3
4
$('#user-toolbar').toolbar({
    content: '#user-toolbar-options', 
    position: 'top'
});

zu dieser Optik führt:

Horizontale Toolbar

Die Anzahl der Icons ist nur begrenzt durch die eigenen Überlegungen zur diesbezüglichen Sinnhaftigkeit ;-)

Toolbar.js steht auf Github unter der liberalen MIT-Lizenz zur Nutzung in privaten und kommerziellen Projekten zur Verfügung.

Links zum Beitrag:

ist seit 1994 im Netz unterwegs, aber bereits seit fast 30 Jahren in der IT daheim. Seit 2008 schreibt er für Dr. Web, seit 2012 ist er Chefredakteur des Magazins. Man findet ihn auch auf Twitter und Facebook, aktiver ist er allerdings auf Google+.

Tags: , ,

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!