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

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 über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen