201217Sep

Gridster.js: jQuery-Plugin für dynamische Raster

Moderne Webanwendungen sind sehr häufig mit einer gewissen Individualität verbunden, die sich zum Beispiel durch ein Anpassen des Layouts auszeichnet. So können Elemente interaktiv verschoben oder umsortiert werden. Für solche Aufgaben eignet sich beispielsweise jQuery UI. Wer nur ein Plugin für das Umstrukturieren von Layout-Elementen benötigt, sollte sich Gridster ansehen. Das jQuery-Plugin bietet eine Drag 'n' Drop-Funktionalität, mit der sich Block-Elemente verschieben, löschen und hinzufügen lassen. Das Layout wird in Echtzeit aktualisiert und neu sortiert.

Gridster.js - jQuery-Plugin für dynamische Raster

Gridster ist einfach zu integrieren und bietet diverse Optionen. Das Plugin arbeitet mit dem data-Attribut von HTML5, über das sich die Blockgrößen und Positionen im Raster definieren lassen. Ein Beispiel:

  • HTML:
  • <div class="gridster">
  • <ul>
  • <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
  • <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
  •  
  • <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
  • <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>
  • </ul>
    </div>
  •  
  • JavaScript:
  • $(".gridster ul").gridster({
  • widget_margins: [10, 10],
  • widget_base_dimensions: [140, 140]
  • });

Das jQuery-Plugin erlaubt es zudem, ein serialisiertes Array mit den Positionen der Elemente zu erzeugen. Bei GitHub finden sich weitere Infos und schließlich der Download.