201022Mär

jsPlumb: jQuery-Plugin für interaktive Verbindungen

Interaktive Webanwendungen benötigen zum Teil ausgefallene Funktionen oder individuelle Bedienelemente. Mit JavaScript-Frameworks sind Entwicklern kaum Grenzen gesetzt und so gibt es mit jsPlumb ein frisches jQuery-Plugin, mit dem sich Elemente untereinander verknüpfen lassen. Die Verknüpfungen werden durch organische oder gerade Linien dargestellt und die Flächen lassen sich per Drag 'n' Drop verschieben. Die verschiedenen Demos des Plugins zeigen, was möglich ist.

jsPlumb

Das Skript funktioniert mit Hilfe von Googles ExplorerCanvas sogar problemlos unter Internet Explorer 6 und arbeitet zuverlässig. Die Konfiguration des Plugins lässt sich in der Dokumentation nachlesen. Die Basis-Funktionalität lässt sich mit folgender Zeile erstellen:

  • $("element1").plumb({target:"element2"});

Die Linienstile und Endpunkte können per Optionen angepasst werden. Das Skript setzt auf die jQuery UI und kann momentan nur über den Quellcode der Seite heruntergeladen werden. Ein Download-Link wird sicherlich folgen.

RSS-Feed abonnieren