Kategorien
JavaScript & jQuery Programmierung

Nestable jQuery: Hierarchisches Listenmenü mit Touchfunktionalität

David Bushell ist offenbar einer von der Sorte, die nicht still sitzen können. Gelegentlich schreibt er für Smashing Magazine, aber ständig entwickelt er fantastische Plugins für jQuery oder gleich ganz ohne jegliche Dependenzen. Erst vor ein paar Tagen stellte ich an dieser Stelle die Version 2 seines Social Media Plugins SocialiteJS vor. Am vorletzten Wochenende schraubte er spontan ein jQuery-Plugin zusammen, mit dessen Hilfe sich Listenmenüs bauen, hierarchisch sortieren und per Drag & Drop wieder umsortieren lassen. Das Ganze funktioniert auch auf mobilen Geräten mit Unterstützung von JavaScript Touch-Events.


Nestable: Das Styling erfolgt per CSS

Nestable: Vorerst mit jQuery, später vermutlich Stand-alone

Wie Socialite wird wohl auch Nestable in der endgültigen Version ohne Abhängigkeiten auskommen, also auf jQuery verzichten können. Im aktuellen Entwicklungsstand wird das Vorhandensein einer jQuery-Version, vermutlich der Einfachheit halber, noch vorausgesetzt. Nestable arbeitet mit Klassen, Unterklassen und HTML5 Data-Attributen, um die Funktionalität in die Liste zu bringen. Mit Nestable ist es möglich, verschachtelte Listenmenüs zu bauen, deren Verschachtelungen sich auf Klick oder Tap öffnen. Mehrere verschachtelte Ebenen stellen kein Problem dar. Zudem können die einzelnen Listenelemente per Drag & Drop an andere Stellen innerhalb des Listenmenüs verschoben werden. Bushell hat sich hier am Verhalten der WordPress-Navigationsmenüs orientiert.

Die einzelnen Navigationsteile aka LI-Elemente erhalten per Data-Attribut eine ID (data-id) zugewiesen. Über Klassen wird definiert, ob es sich um ein Item, also einen Listenpunkt (dd-item), oder um ein Handle (dd-handle), also einen Listeninhalt handelt. Ein dynamisch an die LI-Elemente übergebenes Data-Attribut namens data-action, das über die Zustände collapse oder expand verfügen kann, sorgt für das Aus- und Einklappen der Hierarchie.

Nestable funktioniert auf allen modernen Browsern, sowie dem Internet Explorer ab Version 9. Zudem kann es auf allen mobilen Plattformen mit Javascript-Touch-Event-Unterstützung verwendet werden. Hierzu gehört nicht der Windows Phone Browser. Zwar verfügt Windows Phone natürlich über Touch-Funktionalität, aber nicht auf der Basis von Web Standards im eigenen Gerätebrowser.

Das Plugin steht auf GitHUb zum kostenlosen Download unter der MIT- und der BSD-Lizenz bereit. Komprimieren muss man sich das ansonsten 150kb schwere Stück Script noch selbst.

Links zum Beitrag:

Von Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

Schreibe einen Kommentar

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