Gridster.js Manual

User Manual:

Open the PDF directly: View PDF .
Page Count: 7

PlugintothegridPlugintothegrid

Thisisit,themythicaldraganddropmulticolumngridhasarrived.GridsterisaThisisit,themythicaldraganddropmulticolumngridhasarrived.Gridsterisa

jQuerypluginthatallowsbuildingintuitivedraggablelayoutsfromelementsjQuerypluginthatallowsbuildingintuitivedraggablelayoutsfromelements

spanningmultiplecolumns.Youcanevendynamicallyaddandremoveelementsspanning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.fromthegrid.Itisonparwithslicedbread,orpossiblybetter.MITlicensed.

Suitableforchildrenofallages.MadebySuitableforchildrenofallages.MadebyDucksboardDucksboard..

It'ssosweetweliketocallitdraganddrool.It'ssosweetweliketocallitdraganddrool.

Downloadnow

put a grid in your life

What? Usage Documentation Download Issues

UsageUsage

SetupSetup

IncludedependenciesIncludedependencies

GridsteriscurrentlywrittenasajQueryplugin,soyouneedtoincludeitintheheadofthedocument.DownloadthelatestGridsteriscurrentlywrittenasajQueryplugin,soyouneedtoincludeitintheheadofthedocument.Downloadthelatest

releaseatreleaseatjQueryjQuery..

HTMLStructureHTMLStructure

Classnamesandtagsarecustomizable,gridsteronlycaresaboutdataattributes.Useastructurelikethis:Classnamesandtagsarecustomizable,gridsteronlycaresaboutdataattributes.Useastructurelikethis:

HiQPdfEvaluation03/30/2013

viewrawgridster.html

viewrawgridder.js

viewrawgridster.js

<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="3"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>



<lidata‐row="1"data‐col="4"data‐sizex="1"data‐sizey="1"></li>

<lidata‐row="2"data‐col="4"data‐sizex="2"data‐sizey="1"></li>

<lidata‐row="3"data‐col="4"data‐sizex="1"data‐sizey="1"></li>



<lidata‐row="1"data‐col="5"data‐sizex="1"data‐sizey="1"></li>

<lidata‐row="3"data‐col="5"data‐sizex="1"data‐sizey="1"></li>



<lidata‐row="1"data‐col="6"data‐sizex="1"data‐sizey="1"></li>

<lidata‐row="2"data‐col="6"data‐sizex="1"data‐sizey="2"></li>

</ul>

</div>

ThisGistbroughttoyoubyGitHub.

Griditup!Griditup!

Gridsteracceptsoneargument,ahashofwithconfigurationoptions.SeetheGridsteracceptsoneargument,ahashofwithconfigurationoptions.Seethedocumentationdocumentationfordetails.fordetails.

$(function(){//DOMReady



$(".gridsterul").gridster({

widget_margins:[10,10],

widget_base_dimensions:[140,140]

});



});

ThisGistbroughttoyoubyGitHub.

UsingtheAPIUsingtheAPI

TogetholdoftheAPIobject,usethejQuerydatamethodlikeso:TogetholdoftheAPIobject,usethejQuerydatamethodlikeso:

$(function(){//DOMReady



vargridster=$(".gridsterul").gridster().data('gridster');



});

ThisGistbroughttoyoubyGitHub.

AddanewwidgettothegridAddanewwidgettothegrid

1gridster.add_widget('<liclass="new">TheHTMLofthewidget...</li>',2,1);

ThisGistbroughttoyoubyGitHub.

RemoveawidgetfromthegridRemoveawidgetfromthegrid

1gridster.remove_widget($('.gridsterli').eq(3));

ThisGistbroughttoyoubyGitHub.

GetaserializedarraywiththeelementspositionsGet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.CreatesaJavaScriptarrayofobjectswithpositionsofallwidgets,readytobeencodedasaJSONstring.

1gridster.serialize();

ThisGistbroughttoyoubyGitHub.

HiQPdfEvaluation03/30/2013

DocumentationDocumentation
OptionsOptions
widget_class widget_margins widget_base_dimensions min_cols min_rows max_size_x
max_size_y extra_cols extra_rows autogenerate_stylesheet avoid_overlapped_widgets
draggable.start draggable.drag draggable.stop collision.on_overlap_start collision.on_overlap
collision.on_overlap_stop
MethodsMethods
Thesearethemostcommonlyusedmethods.Ifyouwantmoredetails,checkouttheThesearethemostcommonlyusedmethods.Ifyouwantmoredetails,checkoutthedocumentationgeneratedfromdocumentationgeneratedfrom
sourcesource..
add_widget resize_widget remove_widget serialize serialize_changed enable disable
OptionsOptions
Agridsterconfigurationobject.Agridsterconfigurationobject.
widget_selector:widget_selector:
">li"">li"
Definewhichelementsarethewidgets.CanbeaCSSSelectorstringorajQuerycollectionofHTMLElements.Definewhichelementsarethewidgets.CanbeaCSSSelectorstringorajQuerycollectionofHTMLElements.
widget_margins:widget_margins:
[10,10][10,10]
Horizontalandverticalmarginsrespectivelyforwidgets.Horizontalandverticalmarginsrespectivelyforwidgets.
widget_base_dimensions:widget_base_dimensions:
[140,140][140,140]
Basewidgetdimensionsinpixels.Thefirstindexisthewidth,thesecondistheheight.Basewidgetdimensionsinpixels.Thefirstindexisthewidth,thesecondistheheight.
extra_rows:extra_rows:
00
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.
extra_cols:extra_cols:
00
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.
min_cols:min_cols:
11
Theminimumnumbercolumnstocreate.Theminimumnumbercolumnstocreate.
min_rows:min_rows:
1515
Theminimumnumberofrowstocreate.Theminimumnumberofrowstocreate.
max_size_x:max_size_x:
66
Themaximumnumberofcolumnsthatawidgetcanspan.Themaximumnumberofcolumnsthatawidgetcanspan.
max_size_y:max_size_y:
66
Themaximumnumberofrowsthatawidgetcanspan.Themaximumnumberofrowsthatawidgetcanspan.
autogenerate_stylesheet:autogenerate_stylesheet:
truetrue
Iftrue,alltheCSSrequiredtopositionallwidgetsintheirrespectivecolumnsandrowswillbegeneratedautomaticallyandIftrue,alltheCSSrequiredtopositionallwidgetsintheirrespectivecolumnsandrowswillbegeneratedautomaticallyand
injectedtotheinjectedtothe<head><head>ofthedocument.YoucansetthistofalseandwriteyourownCSStargetingrowsandcolsviadataofthedocument.YoucansetthistofalseandwriteyourownCSStargetingrowsandcolsviadata
attributeslikeso:attributeslikeso:[datacol="1"]{left:10px;}[datacol="1"]{left:10px;}..
avoid_overlapped_widgets:avoid_overlapped_widgets:
truetrue
Don'tallowwidgetsloadedfromtheDOMtooverlap.Thisishelpfulifyou'reloadingwidgetpositionsformthedatabaseandDon'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.theymightbeinconsistent.
serialize_params:serialize_params:
function($w,wgd){return{col:wgd.col,row:wgd.row}}function($w,wgd){return{col:wgd.col,row:wgd.row}}
Afunctiontoreturnserializeddataforeacheachwidget,usedwhencallingtheAfunctiontoreturnserializeddataforeacheachwidget,usedwhencallingtheserializemethodserializemethod.Twoargumentsare.Twoargumentsare
HiQPdfEvaluation03/30/2013

passed:passed:$w$w:thejQuerywrappedHTMLElement,and:thejQuerywrappedHTMLElement,andwgdwgd:thegridcoordsobjectwithkeys:thegridcoordsobjectwithkeyscolcol,,rowrow,,size_xsize_xandandsize_ysize_y..

draggable.start:draggable.start:

function(event,ui){}function(event,ui){}

Acallbackforwhendraggingstarts.Acallbackforwhendraggingstarts.

draggable.drag:draggable.drag:

function(event,ui){}function(event,ui){}

Acallbackforwhenthemouseismovedduringthedragging.Acallbackforwhenthemouseismovedduringthedragging.

draggable.stop:draggable.stop:

function(event,ui){}function(event,ui){}

Acallbackforwhendraggingstops.Acallbackforwhendraggingstops.

collision.on_overlap_start:collision.on_overlap_start:

function(collider_data){}function(collider_data){}

Acallbackforthefirsttimewhenawidgetentersanewgridcell.Acallbackforthefirsttimewhenawidgetentersanewgridcell.

collision.on_overlap:collision.on_overlap:

function(collider_data){}function(collider_data){}

Acallbackforeachtimeawidgetmovesinsideagridcell.Acallbackforeachtimeawidgetmovesinsideagridcell.

collision.on_overlap_stop:collision.on_overlap_stop:

function(collider_data){}function(collider_data){}

Acallbackforthefirsttimewhenawidgetleavesitsoldgridcell.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.Createanewwidgetwiththegivenhtmlandaddittothegrid.

ParametersParameters

htmlhtml

String|HTMLElementString|HTMLElement

ThestringofHTMLElementthatrepresentsthewidgetisgoingtobeadded.ThestringofHTMLElementthatrepresentsthewidgetisgoingtobeadded.

size_xsize_x

NumberNumber

Thenumberofrowsthatthewidgetoccupies.DefaultstoThenumberofrowsthatthewidgetoccupies.Defaultsto

size_ysize_y

NumberNumber

Thenumberofcolumnsthatthewidgetoccupies.DefaultstoThenumberofcolumnsthatthewidgetoccupies.Defaultsto

colcol

NumberNumber

Thecolumnthewidgetshouldstartin.Thecolumnthewidgetshouldstartin.

rowrow

NumberNumber

Therowthewidgetshouldstartin.Therowthewidgetshouldstartin.

ReturnsReturns

ReturnsthejQuerywrappedHTMLElementrepresentingthewidgetthat'sbeencreated.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.Changethesizeofawidget.

ParametersParameters

$widget$widget

HTMLElementHTMLElement

ThejQuerywrappedHTMLElementthatrepresentsthewidgetisgoingtoberesized.ThejQuerywrappedHTMLElementthatrepresentsthewidgetisgoingtoberesized.

size_xsize_x

NumberNumber

Thenumberofrowsthatthewidgetisgoingtospan.Defaultstocurrentsize_x.Thenumberofrowsthatthewidgetisgoingtospan.Defaultstocurrentsize_x.

HiQPdfEvaluation03/30/2013

size_ysize_y

NumberNumber

Thenumberofcolumnsthatthewidgetisgoingtospan.Defaultstocurrentsize_y.Thenumberofcolumnsthatthewidgetisgoingtospan.Defaultstocurrentsize_y.

ReturnsReturns

ReturnsthejQuerywrappedHTMLElementrepresentingthewidgetthat'sbeenresized.ReturnsthejQuerywrappedHTMLElementrepresentingthewidgetthat'sbeenresized.

.remove_widget(el,[callback])

Removeawidgetfromthegrid.Removeawidgetfromthegrid.

ParametersParameters

elel

HTMLElementHTMLElement

ThejQuerywrappedHTMLElementrepresentingthewidgetthatyouwanttoremove.ThejQuerywrappedHTMLElementrepresentingthewidgetthatyouwanttoremove.

callbackcallback

FunctionFunction

Acallbackforwhenthewidgetisremoved.Acallbackforwhenthewidgetisremoved.

ReturnsReturns

ReturnstheinstanceoftheGridsterclass.ReturnstheinstanceoftheGridsterclass.

.serialize([$widgets])

Createsanarrayofobjectsrepresentingthecurrentpositionofallwidgetsinthegrid.Createsanarrayofobjectsrepresentingthecurrentpositionofallwidgetsinthegrid.

ParametersParameters

$widgets$widgets

HTMLElementHTMLElement

ThecollectionofjQuerywrappedHTMLElementsyouwanttoserialize.IfnoargumentispassedallwidgetswillbeThecollectionofjQuerywrappedHTMLElementsyouwanttoserialize.Ifnoargumentispassedallwidgetswillbe

serialized.serialized.

ReturnsReturns

ReturnsanArrayofObjects(readytobeencodedasaJSONstring)withthedataspecifiedbytheReturnsanArrayofObjects(readytobeencodedasaJSONstring)withthedataspecifiedbytheserialize_paramsserialize_params

option.option.

.serialize_changed()

Createsanarrayofobjectsrepresentingthecurrentpositionofthewidgetswhohavechangedposition.Createsanarrayofobjectsrepresentingthecurrentpositionofthewidgetswhohavechangedposition.

ReturnsReturns

ReturnsanArrayofObjects(readytobeencodedasaJSONstring)withthedataspecifiedintheReturnsanArrayofObjects(readytobeencodedasaJSONstring)withthedataspecifiedintheserialize_paramsserialize_params

option.option.

.enable()

Enablesdragging.Enablesdragging.

HiQPdfEvaluation03/30/2013

ReturnsReturns

ReturnstheinstanceoftheGridsterclass.ReturnstheinstanceoftheGridsterclass.

.disable()

Disablesdragging.Disablesdragging.

ReturnsReturns

ReturnstheinstanceoftheGridsterclass.ReturnstheinstanceoftheGridsterclass.

DownloadDownload

RememberthatgridsterdependsonjQuery.DownloadthelatestreleaseatRememberthatgridsterdependsonjQuery.DownloadthelatestreleaseatjQueryjQuery..

gridster.gridster.jsjs

DevelopmentversionDevelopmentversion

jquery.gridster.jsjquery.gridster.js

Productionversion(minified)Productionversion(minified)

jquery.gridster.min.jsjquery.gridster.min.js

gridster.gridster.csscss

DevelopmentversionDevelopmentversion

jquery.gridster.cssjquery.gridster.css

Productionversion(minified)Productionversion(minified)

jquery.gridster.min.cssjquery.gridster.min.css

orclonetherepofromgithuborclonetherepofromgithub

GithubprojectGithubproject

gridster.jsgridster.js

Download.zipDownload.zip

gridster.js.zipgridster.js.zip

BrowsersupportBrowsersupport

GridstersupportsInternetExplorer9+,Firefox,Chrome,SafariandOpera.GridstersupportsInternetExplorer9+,Firefox,Chrome,SafariandOpera.

put a grid in your life

HiQPdfEvaluation03/30/2013

GITHUBWATCHERS

watchers

Aprojectby:

HiQPdfEvaluation03/30/2013

Gridster.js Manual

Navigation menu

Versions of this User Manual:

Views

Navigation