2015-04-10 12:26:54 -06:00
<!doctype html>
< html >
< head >
< title > Demo » Resize » gridster.js< / title >
< link rel = "stylesheet" type = "text/css" href = "assets/css/demo.css" >
< link rel = "stylesheet" type = "text/css" href = "../dist/jquery.gridster.min.css" >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js" > < / script >
< script src = "../dist/jquery.gridster.min.js" type = "text/javascript" charset = "utf-8" > < / script >
< / head >
< body >
< h1 > Resize with limits< / h1 >
< p > Use < code > resize.max_size< / code > and < code > resize.min_size< / code > config options or < code > data-max-sizex< / code > , < code > data-max-sizey< / code > ,
< code > data-min-sizex< / code > and < code > data-min-sizey< / code > HTML attributes to limit widget dimensions when resizing.< / p >
< p > If a global max_size is specified through the config option, can be overwrited in specified widgets with HTML data-attributes or using < code > set_widget_max_size< / code >
2015-04-12 23:26:19 -06:00
method. This page has a global max limit of 4x4< / p >
2015-04-10 12:26:54 -06:00
< div class = "gridster" >
< ul >
2015-04-12 23:26:19 -06:00
< li data-row = "1" data-col = "1" data-sizex = "2" data-sizey = "6" data-min-sizex = "2" data-min-sizey = "6" data-max-sizex = "2" data-max-sizey = "6" >
2015-04-10 12:26:54 -06:00
0
< br >
2015-04-12 23:26:19 -06:00
< small > Overridden to 2, 6< / small >
2015-04-10 12:26:54 -06:00
< / li >
< li data-row = "1" data-col = "3" data-sizex = "1" data-sizey = "2" data-max-sizex = "6" data-max-sizey = "2" >
1
< br >
2015-04-12 23:26:19 -06:00
< small > Overridden max-size to 6, 2< / small >
2015-04-10 12:26:54 -06:00
< / li >
< li data-row = "1" data-col = "4" data-sizex = "1" data-sizey = "1" > 2< / li >
< li data-row = "3" data-col = "2" data-sizex = "3" data-sizey = "1" > 3< / li >
< li data-row = "4" data-col = "1" data-sizex = "1" data-sizey = "1" > 4< / li >
< li data-row = "3" data-col = "1" data-sizex = "1" data-sizey = "1" > 5< / li >
< li data-row = "4" data-col = "2" data-sizex = "1" data-sizey = "1" > 6< / li >
< li data-row = "5" data-col = "2" data-sizex = "1" data-sizey = "1" > 7< / li >
< li data-row = "4" data-col = "4" data-sizex = "1" data-sizey = "1" > 8< / li >
< li data-row = "1" data-col = "5" data-sizex = "3" data-sizey = "3" data-min-sizex = "3" data-min-sizey = "3" >
9
< br >
2015-04-12 23:26:19 -06:00
< small > Overridden min-size to 3, 3< / small >
2015-04-10 12:26:54 -06:00
< / li >
< li data-row = "5" data-col = "1" data-sizex = "1" data-sizey = "2" > 10< / li >
< li data-row = "4" data-col = "3" data-sizex = "1" data-sizey = "2" > 11< / li >
< li data-row = "5" data-col = "4" data-sizex = "1" data-sizey = "1" > 12< / li >
< li data-row = "6" data-col = "2" data-sizex = "3" data-sizey = "1" > 13< / li >
< li data-row = "4" data-col = "5" data-sizex = "1" data-sizey = "2" > 14< / li >
< li data-row = "6" data-col = "5" data-sizex = "1" data-sizey = "1" > 15< / li >
< li data-row = "7" data-col = "3" data-sizex = "1" data-sizey = "1" > 16< / li >
< / ul >
< / div >
< script type = "text/javascript" >
var gridster;
$(function () {
gridster = $(".gridster ul").gridster({
2015-04-12 23:26:19 -06:00
widget_base_dimensions: [100, 100],
2015-04-10 12:26:54 -06:00
widget_margins: [5, 5],
helper: 'clone',
resize: {
enabled: true,
max_size: [4, 4],
min_size: [1, 1]
}
}).data('gridster');
});
< / script >
< / body >
< / html >
