Organigramme in jQuery

Organigramme sind eine feine Sache zur Darstellung von Sitemaps, Unternehmenshierarchien oder von Abläufen. Allerdings sind sie hinsichtlich Erstellung in HTML nicht ganz ohne. Wenn ich im Web ein Organigramm sehe, handelt es sich zumeist um einen Screenshot. Eigentlich schade, denn zum einen umgehe ich damit geschickt Google, zum anderen ist man in HTML natürlich viel flexibler als mit einer statischen Grafik.

Screenshot jQuery Orgchart

Das jQuery Plugin Org Chart erstellt aus einer unordered list ein Organigramm – so einfach kann es sein! ;) Das Design lässt sich recht einfach ändern, jedes Listenelement kann (natürlich) einen individuellen Content haben (zum Beispiel ein Passfoto mit Unternehmensdaten) und darüber hinaus kann natürlich jeder einzelne Eintrag individuell angepasst werden (falls der Chef ein größeres Passwort haben möchte, als seine Angestellten).

Das Plugin kann aber noch viel mehr: Teilbäume können per Click ein/ausgeblendet, und einzelne Blätter via Drag&Drop verschoben werden. Eine Demo eines Organigramms findet ihr hier. Die Dokumentation findet ihr ebenso wie den Quelltext auf GitHub. Zugegenermaßen braucht man ein Organigramm nicht täglich, aber das Plugin ist für mich die bisher einfachste Methode einen solchen Chart umzusetzen.

Ähnliche Beiträge

Ideale Formulare in HTML5 Zusammen mit HTML5 wurden Formulare in ihren Möglichkeiten immens aufgewertet, was prinzipiell super ist, wenn man es benutzen könnte. Es ergibt sich ...
Autoresize von Textareas mit jQuery Textareas sind immer so eine Sache: egal wie groß man sie macht, der Kunde findet sie zu klein. Auch die Breite der Eingabe ist oft problematisch, da ...
elRTE – WYSIYWYG-Editor in jQuery inkl. Dateimanag... WYSIWYG-Editoren sind etwas Nettes, haben aber dennoch ein Problem: Die Bilder, die man in den Text einbinden möchte, müssen dummerweise erstmal auf d...
Zebra Datepicker für jQuery Benutzer schaffen es nicht, in ein Input-Feld ein Datum in einem festen Format einzugeben. Das Auswerten der Eingabe macht in der Regel mehr Arbeit, a...

Eine Antwort auf „Organigramme in jQuery“

  1. Super, das ist etwas, was ich gerade sehr gut gebrauchen kann. Ich hab übrigens schon Orgnanigramme in klassischem HTML gemacht (generiert aus einer Asp.net Klasse), indem ich verschachtelte Tabellen generiert habe.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.