Gridster.js Manual
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 7
HiQPdf Evaluation 03/30/2013
put a grid in your life
What?
Usage
Documentation
Download
Issues
Plug in to the grid
This is it, the mythical draganddrop multicolumn grid has arrived. Gridster is a
jQuery plugin that allows building intuitive draggable layouts from elements
spanning multiple columns. You can even dynamically add and remove elements
from the grid. It is on par with sliced bread, or possibly better. MIT licensed.
Suitable for children of all ages. Made by Ducksboard.
Ducksboard.
Download now
It's so sweet we like to call it draganddrool.
Usage
Setup
Include dependencies
Gridster is currently written as a jQuery plugin, so you need to include it in the head of the document. Download the latest
release at jQuery.
jQuery.
HTML Structure
Class names and tags are customizable, gridster only cares about data attributes. Use a structure like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
HiQPdf Evaluation 03/30/2013
This Gist brought to you by GitHub.
gridster.html view raw
Grid it up!
Gridster accepts one argument, a hash of with configuration options. See the documentation for details.
1
2
3
4
5
6
7
8
$(function(){ //DOM Ready
$(".gridster ul").gridster({
widget_margins: [10, 10],
widget_base_dimensions: [140, 140]
});
});
This Gist brought to you by GitHub.
gridder.js view raw
Using the API
To get hold of the API object, use the jQuery data method like so:
1
2
3
4
5
$(function(){ //DOM Ready
var gridster = $(".gridster ul").gridster().data('gridster');
});
This Gist brought to you by GitHub.
gridster.js view raw
Add a new widget to the grid
1
gridster.add_widget('
The HTML of the widget...', 2, 1);
This Gist brought to you by GitHub.
gridster.js view raw
Remove a widget from the grid
1
gridster.remove_widget( $('.gridster li').eq(3) );
This Gist brought to you by GitHub.
gridster.js view raw
Get a serialized array with the elements positions
Creates a JavaScript array of objects with positions of all widgets, ready to be encoded as a JSON string.
1
gridster.serialize();
This Gist brought to you by GitHub.
gridster.js view raw
Documentation
HiQPdf Evaluation 03/30/2013
Options
widget_class
max_size_y
widget_margins
extra_cols
draggable.start
widget_base_dimensions
extra_rows
draggable.drag
min_cols
autogenerate_stylesheet
draggable.stop
min_rows
max_size_x
avoid_overlapped_widgets
collision.on_overlap_start
collision.on_overlap
collision.on_overlap_stop
Methods
These are the most commonly used methods. If you want more details, check out the documentation generated from
source.
source.
add_widget
resize_widget
remove_widget
serialize
serialize_changed
enable
disable
Options
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.
extra_rows: 0
Add more rows to the grid in addition to those that have been calculated.
extra_cols: 0
Add more rows to the grid in addition to those that have been calculated.
min_cols: 1
The minimum number columns to create.
min_rows: 15
The minimum number of rows to create.
max_size_x: 6
The maximum number of columns that a widget can span.
max_size_y: 6
The maximum number of rows that a widget can span.
autogenerate_stylesheet: true
If true, all the CSS required to position all widgets in their respective columns and rows will be generated automatically and
injected to the of the document. You can set this to false and write your own CSS targeting rows and cols via data
attributes like so: [datacol="1"] { left: 10px; }.
avoid_overlapped_widgets: true
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 } }
A function to return serialized data for each each widget, used when calling the serialize method.
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.
HiQPdf Evaluation 03/30/2013
draggable.start: function(event, ui){}
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.
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.
.add_widget( html, [size_x], [size_y], [col], [row] )
Create a new widget with the given html and add it to the grid.
Parameters
htmlString|HTMLElement
The string of HTMLElement that represents the widget is going to be added.
size_x Number
The number of rows that the widget occupies. Defaults to 1.
size_y Number
The number of columns that the widget occupies. Defaults to 1.
col Number
The column the widget should start in.
row Number
The row the widget should start in.
Returns
Returns the jQuery wrapped HTMLElement representing the widget that's been created.
.resize_widget( $widget, [size_x], [size_y] )
Change the size of a widget.
Parameters
$widgetHTMLElement
The jQuery wrapped HTMLElement that represents the widget is going to be resized.
size_x Number
The number of rows that the widget is going to span. Defaults to current size_x.
size_y Number
HiQPdf Evaluation 03/30/2013
The number of columns that the widget is going to span. Defaults to current size_y.
Returns
Returns the jQuery wrapped HTMLElement representing the widget that's been resized.
.remove_widget( el, [callback] )
Remove a widget from the grid.
Parameters
el HTMLElement
The jQuery wrapped HTMLElement representing the widget that you want to remove.
callback Function
A callback for when the widget is removed.
Returns
Returns the instance of the Gridster class.
.serialize( [$widgets] )
Creates an array of objects representing the current position of all widgets in the grid.
Parameters
$widgets HTMLElement
The collection of jQuery wrapped HTMLElements you want to serialize. If no argument is passed all widgets will be
serialized.
Returns
Returns 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.
Returns
Returns an Array of Objects (ready to be encoded as a JSON string) with the data specified in the serialize_params
option.
.enable( )
Enables dragging.
Returns
HiQPdf Evaluation 03/30/2013
Returns the instance of the Gridster class.
.disable( )
Disables dragging.
Returns
Returns the instance of the Gridster class.
Download
Remember that gridster depends on jQuery. Download the latest release at jQuery.
jQuery.
gridster.js
gridster.js
Development version
jquery.gridster.js
Production version (minified)
jquery.gridster.min.js
gridster.css
gridster.css
Development version
jquery.gridster.css
Production version (minified)
jquery.gridster.min.css
or clone the repo from github
Github project
gridster.js
Download .zip
gridster.js.zip
Browser support
Gridster supports Internet Explorer 9+, Firefox, Chrome, Safari and Opera.
put a grid in your life
GITHUB WATCHERS
HiQPdf Evaluation 03/30/2013
watchers
A project by:
Source Exif Data:
File Type : PDF
File Type Extension : pdf
MIME Type : application/pdf
PDF Version : 1.4
Linearized : No
Page Layout : OneColumn
Page Count : 7
Has XFA : No
Page Mode : UseNone
Producer : HiQPdf 6.0
Author : duscksboard
Subject : gridster.js, a drag-and-drop multi-column jQuery grid plugin
Title : gridster.js
Modify Date : 2014:08:26 13:08:45+02:00
EXIF Metadata provided by EXIF.tools