Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@jmcph4

jmcph4/gridster.html

Created October 22, 2012 03:41
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jmcph4/3929514 to your computer and use it in GitHub Desktop.
Save jmcph4/3929514 to your computer and use it in GitHub Desktop.
Download ZIP
A very quick and very messy example of the jQuery plugin gridster.js.
Raw
gridster.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/ducksboard/gridster.js/master/dist/jquery.gridster.min.js"></script>
<script type="text/javascript">
$(function(){ //DOM Ready
$(".gridster ul").gridster({
widget_margins: [10, 10],
widget_base_dimensions: [140, 140]
});
});
</script>
<style type="text/css">
/*! gridster.js - v0.1.0 - 2012-10-20
* http://gridster.net/
* Copyright (c) 2012 ducksboard; Licensed MIT */.gridster{position:relative}.gridster>*{margin:0 auto;-webkit-transition:height .4s;-moz-transition:height .4s;-o-transition:height .4s;-ms-transition:height .4s;transition:height .4s}.gridster .gs_w{z-index:2;position:absolute}.ready .gs_w:not(.preview-holder){-webkit-transition:opacity .3s,left .3s,top .3s;-moz-transition:opacity .3s,left .3s,top .3s;-o-transition:opacity .3s,left .3s,top .3s;transition:opacity .3s,left .3s,top .3s}.ready .gs_w:not(.preview-holder){-webkit-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;-moz-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;-o-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;transition:opacity .3s,left .3s,top .3s,width .3s,height .3s}.gridster .preview-holder{z-index:1;position:absolute;background-color:#fff;border-color:#fff;opacity:.3}.gridster .player-revert{z-index:10!important;-webkit-transition:left .3s,top .3s!important;-moz-transition:left .3s,top .3s!important;-o-transition:left .3s,top .3s!important;transition:left .3s,top .3s!important}.gridster .dragging{z-index:10!important;-webkit-transition:all 0s!important;-moz-transition:all 0s!important;-o-transition:all 0s!important;transition:all 0s!important}
</style>
<style type="text/css">
.gridster li
{
border-width:1px;
}
</style>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="7" data-sizey="7"><h1>Grid One</h1></li>
<li data-row="1" data-col="2" data-sizex="3" data-sizey="3"><h1>Grid Two</h1></li>
<li data-row="=1" data-col="3" data-sizex="2" data-sizey="3"><h1>Grid Three</h1></li>
<li data-row="1" data-col="2" data-sizex="2" data-sizey="1"><h1>Grid Four</h1></li>
<li data-row="2" data-col="2" data-sizex="2" data-sizey="2"><h1>Grid Five</h1></li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1"><h1>Grid Six</h1></li>
<li data-row="2" data-col="4" data-sizex="2" data-sizey="1"><h1>Grid Seven</h1></li>
<li data-row="3" data-col="4" data-sizex="1" data-sizey="1"><h1>Grid Eight</h1></li>
<li data-row="1" data-col="5" data-sizex="1" data-sizey="1"><h1>Grid Nine</h1></li>
<li data-row="3" data-col="5" data-sizex="1" data-sizey="1"><h1>Grid Ten</h1></li>
<li data-row="1" data-col="6" data-sizex="1" data-sizey="1"><h1>Grid Eleven</h1></li>
<li data-row="2" data-col="6" data-sizex="1" data-sizey="2"><h1>Grid Twelve</h1></li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment