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

Typeahead – Auto-Complete von Twitter Wenn man in der letzten Zeit eine Sau durch das Dorf getrieben hat, dann war das wohl suggestive Vorschläge bei Formularen. Lustigerweise gibt es die ...
23 Bildergalerien für jQuery Beim Blogrammierer hat sich einer besonders viel Arbeit gemacht :) Hier gibt es 23 Bildergalerien für jQuery zu bestaunen, nebst Screenshot, Demo und ...
Reale Schatten mit jQuery Schatten gehen ja super mit CSS3, aber zugegebenermaßen muss man etwas Aufwand betreiben um diese realistisch erscheinen zu lassen. Insbesondere wird ...
Nokia Maps API mit jQuery Eine Landkarte online zu bringen bedeutet nicht zwingend Google Maps, sondern es gibt auch noch andere Systeme. Nokia Maps ist eines dieser Systeme un...

Ein Kommentar

Schreibe einen Kommentar