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

Bei der Navigation mit der Tastatur arbeiten In letzter Zeit hat sich das Web durch Online-Anwendungen auf die Fahne geschrieben, Desktop-Anwendungen ablösen zu wollen bzw. zu ersetzen. Die Ansät...
HTML-Tables mit jQuery Ich hoffe ihr benutzt Tabellen nur noch zur Datenvisualisierung, und nicht mehr für das Design! ;) Aber zumindest dort sind sie unumgänglich. Dummerwe...
jQuery.payment: Kreditkarten-Validierung Inzwischen dürfte es sich auch bis in die hintersten Ecken herum gesprochen haben, das man Kreditkarten nicht mit Regular Expressions beikommen kann. ...
Passwortstärke mit Javascript Anzeigen Es gibt doofe Passwörter, wie zum Beispiel das Wort passwort, und es gibt relativ gute Passwörter, wie zum Beispiel p4$$w0r7, und es gibt noch bessere...

Ein Kommentar

Schreibe einen Kommentar