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


Zeitleisten mit Timeglider für jQuery
In meiner letzten Firma habe ich viel für eine Branche gearbeitet, die Wert darauf legte ihren Kunden zu vermitteln, das ihr Produkt mindestens seit d...


Star Rating mit jQuery jRating
Ich glaube die ersten die es hatten war Amazon, jene verteufelt einfache Möglichkeit einen Artikel ganz schnell mit einem bis fünf Sternen zu bewerten...


Der Bild-Upload, das Design und der Kunde
Im Leben eines Webworkers kann man von zwei Prämissen ausgehen : a) Kunden beherrschen keine Bildbearbeitung und b) Grafiker schaffen es nicht ein nic...


Die Selektoren von jQuery erweitern
Ich bin über einen recht interessanten Artikel im Blog von James Padolsey gestolpert, der nachhaltig Arbeit einsparen kann, insofern man jQuery verwen...

Kommentare

  1. SarahAndrea Royce

    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.