A gridster configuration object.
widget_selector: "li"Define which elements are the widgets. Can be a CSS Selector string or a jQuery collection of HTMLElements.
widget_margins: [10, 10]Horizontal and vertical margins respectively for widgets.
widget_base_dimensions: [140, 140]Base widget dimensions in pixels. The first index is the width, the second is the height.
Add more rows to the grid in addition to those that have been calculated.
Add more rows to the grid in addition to those that have been calculated.
max_cols: nullThe maximum number of columns to create. Set to `null` to disable.
min_cols: 1The minimum number of columns to create.
min_rows: 15The minimum number of rows to create.
max_size_x: falseThe maximum number of columns that a widget can span.
autogenerate_stylesheet: trueIf true, all the CSS required to position all widgets in their respective columns and rows will be generated automatically and injected to the <head>
of the document. You can set this to false and write your own CSS targeting rows and cols via data-attributes like so: [data-col="1"] { left: 10px; }
.
Don't allow widgets loaded from the DOM to overlap. This is helpful if you're loading widget positions form the database and they might be inconsistent.
serialize_params: function($w, wgd) { return { col: wgd.col, row: wgd.row, size_x: wgd.size_x, size_y: wgd.size_y } }A function to return serialized data for each each widget, used when calling the serialize method. Two arguments are passed: $w
: the jQuery wrapped HTMLElement, and wgd
: the grid coords object with keys col
, row
, size_x
and size_y
.
A callback for when dragging starts.
draggable.drag: function(event, ui){}A callback for when the mouse is moved during the dragging.
draggable.stop: function(event, ui){}A callback for when dragging stops.
resize.enabled: falseSet to true to enable drag-and-drop widget resizing. This setting doesn't affect to the resize_widget
method.
Axes in which widgets can be resized. Can be x, y or both
resize.handle_class: 'gs-resize-handle'CSS class name used by resize handles.
resize.handle_append_to: ''Set a valid CSS selector to append resize handles to. If value evaluates to false it's appended to the widget.
resize.max_size: [Infinity, Infinity]Limit widget dimensions when resizing. Array values should be integers: [max_cols_occupied, max_rows_occupied]
A callback executed when resizing starts.
resize.resize: function(e, ui, $widget) {}A callback executed during the resizing.
resize.stop: function(e, ui, $widget) {}A callback executed when resizing stops.
collision.on_overlap_start: function(collider_data) { }A callback for the first time when a widget enters a new grid cell.
collision.on_overlap: function(collider_data) { }A callback for each time a widget moves inside a grid cell.
collision.on_overlap_stop: function(collider_data) { }A callback for the first time when a widget leaves its old grid cell.
.serialize( [$widgets] )Creates an array of objects representing the current position of all widgets in the grid.
ParametersReturns an Array of Objects (ready to be encoded as a JSON string) with the data specified by the serialize_params option.
.serialize_changed( )Creates an array of objects representing the current position of the widgets who have changed position.
ReturnsReturns an Array of Objects (ready to be encoded as a JSON string) with the data specified in the serialize_params option.
.enable( )Enables dragging.
ReturnsReturns the instance of the Gridster class.
.disable( )Disables dragging.
ReturnsReturns the instance of the Gridster class.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4