This chapter is about the technical background of the dynamic grid system which visualizes grids and grid elements in AsTeRICS Grid.
When opening AsTeRICS Grid in the main view the latest used grid is shown:
From a technical perspective this grid is a unordered list (
<ul>) where each list element (
<li>) represents a grid element. HTML representations for these grid elements are generated in templates.js.
GridList and grid.js
Positioning of the grid elements is done by the GridList library. It is initialized and used in the file grid.js. All relevant code for functionalities like repositioning or resizing can be found there. Styling of the grid and it’s elements is done by the gridlist.css stylesheet.
Repositioning and resizing of elements
Repositioning of elements is already supported by default by the GridList library. For resizing of elements the Resizable functionality of jQueryUI is used. The code for connecting jQueryUI Resizable with GridList can be found in the function
getResizeOptions() in the
resize handler about at grid.js:151.