gridster.js-rails 0.6.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/CHANGELOG.md +337 -0
- data/LICENSE +19 -0
- data/README.md +73 -0
- data/bower.json +31 -0
- data/demos/SwapDrop.html +56 -0
- data/demos/adding-widgets-dynamically.html +54 -0
- data/demos/assets/css/demo.css +94 -0
- data/demos/assets/img/sprite.png +0 -0
- data/demos/assets/js/plugins.js +25 -0
- data/demos/custom-drag-handle.html +96 -0
- data/demos/dynamic-grid-width.html +52 -0
- data/demos/expandable-widgets.html +64 -0
- data/demos/grid-from-serialize.html +63 -0
- data/demos/index.html +39 -0
- data/demos/jquery.gridster.demo2.html +59 -0
- data/demos/multiple-grids.html +71 -0
- data/demos/resize-limits.html +76 -0
- data/demos/resize.html +65 -0
- data/demos/responsive.html +96 -0
- data/demos/serialize.html +89 -0
- data/demos/sticky-postion.html +50 -0
- data/demos/using-drag-callbacks.html +75 -0
- data/demos/using-resize-callbacks.html +78 -0
- data/lib/gridster.js-rails/version.rb +5 -0
- data/package.json +46 -0
- data/vendor/assets/javascripts/jquery.gridster.js +5066 -0
- data/vendor/assets/javascripts/jquery.gridster.min.js +2 -0
- data/vendor/assets/javascripts/jquery.gridster.with-extras.js +5218 -0
- data/vendor/assets/javascripts/jquery.gridster.with-extras.min.js +2 -0
- data/vendor/assets/stylesheets/jquery.gridster.css +128 -0
- data/vendor/assets/stylesheets/jquery.gridster.min.css +2 -0
- metadata +105 -0
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Demo » Grid from serialize » gridster.js</title>
|
|
5
|
+
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
|
|
6
|
+
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
|
|
7
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
|
8
|
+
<script src="../dist/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
|
|
9
|
+
</head>
|
|
10
|
+
|
|
11
|
+
<body>
|
|
12
|
+
|
|
13
|
+
<h1>Build grid from serialized positions</h1>
|
|
14
|
+
|
|
15
|
+
<p>Build a entire new grid from previously stored positions obtained with <code>serialize</code> method.</p>
|
|
16
|
+
|
|
17
|
+
<div class="controls">
|
|
18
|
+
<button class="js-seralize">Build from serialize</button>
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<div class="gridster">
|
|
22
|
+
<ul>
|
|
23
|
+
</ul>
|
|
24
|
+
</div>
|
|
25
|
+
|
|
26
|
+
<script type="text/javascript">
|
|
27
|
+
var gridster;
|
|
28
|
+
|
|
29
|
+
// same object than generated with gridster.serialize() method
|
|
30
|
+
var serialization = [
|
|
31
|
+
{ col: 1, row: 1, size_x: 2, size_y: 2 },
|
|
32
|
+
{ col: 3, row: 1, size_x: 1, size_y: 2 },
|
|
33
|
+
{ col: 4, row: 1, size_x: 1, size_y: 1 },
|
|
34
|
+
{ col: 2, row: 3, size_x: 3, size_y: 1 },
|
|
35
|
+
{ col: 1, row: 4, size_x: 1, size_y: 1 },
|
|
36
|
+
{ col: 1, row: 3, size_x: 1, size_y: 1 },
|
|
37
|
+
{ col: 2, row: 4, size_x: 1, size_y: 1 },
|
|
38
|
+
{ col: 2, row: 5, size_x: 1, size_y: 1 }
|
|
39
|
+
];
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
// sort serialization
|
|
43
|
+
serialization = Gridster.sort_by_row_and_col_asc(serialization);
|
|
44
|
+
|
|
45
|
+
$(function () {
|
|
46
|
+
|
|
47
|
+
gridster = $(".gridster ul").gridster({
|
|
48
|
+
widget_base_dimensions: [100, 55],
|
|
49
|
+
widget_margins: [5, 5]
|
|
50
|
+
}).data('gridster');
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
$('.js-seralize').on('click', function () {
|
|
54
|
+
gridster.remove_all_widgets();
|
|
55
|
+
$.each(serialization, function () {
|
|
56
|
+
gridster.add_widget('<li />', this.size_x, this.size_y, this.col, this.row);
|
|
57
|
+
});
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
});
|
|
61
|
+
</script>
|
|
62
|
+
</body>
|
|
63
|
+
</html>
|
data/demos/index.html
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Gridster Demos</title>
|
|
5
|
+
|
|
6
|
+
<link rel="stylesheet" href="assets/css/demo.css">
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<style>
|
|
10
|
+
ul {
|
|
11
|
+
padding: 0 0 0 40px;
|
|
12
|
+
background-color: cadetblue;
|
|
13
|
+
width: 50%;
|
|
14
|
+
}
|
|
15
|
+
</style>
|
|
16
|
+
|
|
17
|
+
<div class="content">
|
|
18
|
+
<h2>Samples</h2>
|
|
19
|
+
</div>
|
|
20
|
+
<ul>
|
|
21
|
+
<li><a href="adding-widgets-dynamically.html">Adding widgets dynamically</a></li>
|
|
22
|
+
<li><a href="custom-drag-handle.html">Custom drag handle</a></li>
|
|
23
|
+
<li><a href="expandable-widgets.html">Expandable widgets</a></li>
|
|
24
|
+
<li><a href="grid-from-serialize.html">Build grid from serialize</a></li>
|
|
25
|
+
<li><a href="multiple-grids.html">Multiple gridster instances on the same page</a></li>
|
|
26
|
+
<li><a href="resize.html">Resizable widgets</a></li>
|
|
27
|
+
<li><a href="resize-limits.html">Resizable widgets with constraints</a></li>
|
|
28
|
+
<li><a href="serialize.html">Serialize widgets positions</a></li>
|
|
29
|
+
<li><a href="using-drag-callbacks.html">Using drag callbacks</a></li>
|
|
30
|
+
<li><a href="using-resize-callbacks.html">Using resize callbacks</a></li>
|
|
31
|
+
<li><a href="dynamic-grid-width.html">Dynamic grid width</a></li>
|
|
32
|
+
<li><a href="responsive.html">Responsive grid width</a></li>
|
|
33
|
+
<li><a href="SwapDrop.html">Grid with larger widgets swapping spots with smaller ones</a></li>
|
|
34
|
+
<li><a href="sticky-postion.html">Grid that allows widgets to be exactly placed anywhere</a></li>
|
|
35
|
+
</ul>
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
</body>
|
|
39
|
+
</html>
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
|
|
5
|
+
<title>demo</title>
|
|
6
|
+
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
|
|
7
|
+
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
|
|
8
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
|
9
|
+
<script src="../dist/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
|
|
10
|
+
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
|
|
14
|
+
<div class="gridster">
|
|
15
|
+
<ul>
|
|
16
|
+
<li data-row="1" data-col="1" data-sizex="3" data-sizey="3"></li>
|
|
17
|
+
<li data-row="1" data-col="4" data-sizex="1" data-sizey="3"></li>
|
|
18
|
+
|
|
19
|
+
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1"></li>
|
|
20
|
+
<li data-row="4" data-col="2" data-sizex="1" data-sizey="1"></li>
|
|
21
|
+
<li data-row="4" data-col="3" data-sizex="1" data-sizey="1"></li>
|
|
22
|
+
<li data-row="4" data-col="4" data-sizex="1" data-sizey="1"></li>
|
|
23
|
+
</ul>
|
|
24
|
+
</div>
|
|
25
|
+
|
|
26
|
+
<script type="text/javascript">
|
|
27
|
+
var api;
|
|
28
|
+
|
|
29
|
+
$(function () {
|
|
30
|
+
|
|
31
|
+
api = $(".gridster ul").gridster({
|
|
32
|
+
draggable: {
|
|
33
|
+
stop: function (event, ui, self) {
|
|
34
|
+
// $('.overlapped-area').hide();
|
|
35
|
+
this.$wrapper.addClass('sorting');
|
|
36
|
+
},
|
|
37
|
+
start: function (event, ui, self) {
|
|
38
|
+
this.$wrapper.removeClass('sorting');
|
|
39
|
+
// $('.overlapped-area').show();
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
collision: {
|
|
43
|
+
on_overlap_start: function (collider) {
|
|
44
|
+
// $(collider).data('graph').show();
|
|
45
|
+
//$(this).data('collision', collider);
|
|
46
|
+
},
|
|
47
|
+
on_overlap_stop: function (collider) {
|
|
48
|
+
//$(this).data('collision', null);
|
|
49
|
+
},
|
|
50
|
+
on_overlap: function (c) {
|
|
51
|
+
//$(this).data('collision', c);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}).data('gridster');
|
|
55
|
+
|
|
56
|
+
});
|
|
57
|
+
</script>
|
|
58
|
+
</body>
|
|
59
|
+
</html>
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Demo » Multiple gridster intances » gridster.js</title>
|
|
5
|
+
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
|
|
6
|
+
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
|
|
7
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
|
8
|
+
<script src="../dist/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
|
|
9
|
+
</head>
|
|
10
|
+
|
|
11
|
+
<body>
|
|
12
|
+
|
|
13
|
+
<h1>Multiple gridster instances with different configurations</h1>
|
|
14
|
+
|
|
15
|
+
<p>When using multiple gridster instances on the same page you can scope the CSS code generated by gridster using <code>namespace</code> config
|
|
16
|
+
option.</p>
|
|
17
|
+
|
|
18
|
+
<h2>Demo 1</h2>
|
|
19
|
+
|
|
20
|
+
<div id="demo-1" class="gridster">
|
|
21
|
+
<ul>
|
|
22
|
+
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0</li>
|
|
23
|
+
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li>
|
|
24
|
+
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
|
|
25
|
+
<li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
|
|
26
|
+
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
|
|
27
|
+
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
|
|
28
|
+
<li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
|
|
29
|
+
<li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
|
|
30
|
+
<li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>
|
|
31
|
+
</ul>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
<h2>Demo 2</h2>
|
|
36
|
+
|
|
37
|
+
<div id="demo-2" class="gridster">
|
|
38
|
+
<ul>
|
|
39
|
+
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0</li>
|
|
40
|
+
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li>
|
|
41
|
+
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
|
|
42
|
+
<li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
|
|
43
|
+
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
|
|
44
|
+
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
|
|
45
|
+
<li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
|
|
46
|
+
<li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
|
|
47
|
+
<li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>
|
|
48
|
+
</ul>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<script type="text/javascript">
|
|
52
|
+
var gridster = [];
|
|
53
|
+
|
|
54
|
+
$(function () {
|
|
55
|
+
|
|
56
|
+
gridster[0] = $("#demo-1 ul").gridster({
|
|
57
|
+
namespace: '#demo-1',
|
|
58
|
+
widget_base_dimensions: [100, 55],
|
|
59
|
+
widget_margins: [5, 5]
|
|
60
|
+
}).data('gridster');
|
|
61
|
+
|
|
62
|
+
gridster[1] = $("#demo-2 ul").gridster({
|
|
63
|
+
namespace: '#demo-2',
|
|
64
|
+
widget_base_dimensions: [200, 110],
|
|
65
|
+
widget_margins: [10, 10]
|
|
66
|
+
}).data('gridster');
|
|
67
|
+
|
|
68
|
+
});
|
|
69
|
+
</script>
|
|
70
|
+
</body>
|
|
71
|
+
</html>
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Demo » Resize » gridster.js</title>
|
|
5
|
+
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
|
|
6
|
+
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
|
|
7
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
|
8
|
+
<script src="../dist/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
|
|
9
|
+
</head>
|
|
10
|
+
|
|
11
|
+
<body>
|
|
12
|
+
|
|
13
|
+
<h1>Resize with limits</h1>
|
|
14
|
+
|
|
15
|
+
<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>,
|
|
16
|
+
<code>data-min-sizex</code> and <code>data-min-sizey</code> HTML attributes to limit widget dimensions when resizing.</p>
|
|
17
|
+
|
|
18
|
+
<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>
|
|
19
|
+
method. This page has a global max limit of 4x4</p>
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
<div class="gridster">
|
|
23
|
+
<ul>
|
|
24
|
+
<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">
|
|
25
|
+
0
|
|
26
|
+
<br>
|
|
27
|
+
<small>Overridden to 2, 6</small>
|
|
28
|
+
</li>
|
|
29
|
+
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2" data-max-sizex="6" data-max-sizey="2">
|
|
30
|
+
1
|
|
31
|
+
<br>
|
|
32
|
+
<small>Overridden max-size to 6, 2</small>
|
|
33
|
+
</li>
|
|
34
|
+
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
|
|
35
|
+
<li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
|
|
36
|
+
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
|
|
37
|
+
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
|
|
38
|
+
<li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
|
|
39
|
+
<li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
|
|
40
|
+
<li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>
|
|
41
|
+
<li data-row="1" data-col="5" data-sizex="3" data-sizey="3" data-min-sizex="3" data-min-sizey="3">
|
|
42
|
+
9
|
|
43
|
+
<br>
|
|
44
|
+
<small>Overridden min-size to 3, 3</small>
|
|
45
|
+
</li>
|
|
46
|
+
<li data-row="5" data-col="1" data-sizex="1" data-sizey="2">10</li>
|
|
47
|
+
<li data-row="4" data-col="3" data-sizex="1" data-sizey="2">11</li>
|
|
48
|
+
<li data-row="5" data-col="4" data-sizex="1" data-sizey="1">12</li>
|
|
49
|
+
<li data-row="6" data-col="2" data-sizex="3" data-sizey="1">13</li>
|
|
50
|
+
<li data-row="4" data-col="5" data-sizex="1" data-sizey="2">14</li>
|
|
51
|
+
<li data-row="6" data-col="5" data-sizex="1" data-sizey="1">15</li>
|
|
52
|
+
<li data-row="7" data-col="3" data-sizex="1" data-sizey="1">16</li>
|
|
53
|
+
</ul>
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
<script type="text/javascript">
|
|
57
|
+
var gridster;
|
|
58
|
+
|
|
59
|
+
$(function () {
|
|
60
|
+
|
|
61
|
+
gridster = $(".gridster ul").gridster({
|
|
62
|
+
widget_base_dimensions: [100, 100],
|
|
63
|
+
widget_margins: [5, 5],
|
|
64
|
+
helper: 'clone',
|
|
65
|
+
resize: {
|
|
66
|
+
enabled: true,
|
|
67
|
+
max_size: [4, 4],
|
|
68
|
+
min_size: [1, 1]
|
|
69
|
+
}
|
|
70
|
+
}).data('gridster');
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
});
|
|
74
|
+
</script>
|
|
75
|
+
</body>
|
|
76
|
+
</html>
|
data/demos/resize.html
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Demo » Resize » gridster.js</title>
|
|
5
|
+
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
|
|
6
|
+
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
|
|
7
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
|
8
|
+
<script src="../dist/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
|
|
9
|
+
</head>
|
|
10
|
+
|
|
11
|
+
<body>
|
|
12
|
+
|
|
13
|
+
<h1>Resize</h1>
|
|
14
|
+
|
|
15
|
+
<p>Grab the right or bottom border and drag to the desired width or height.</p>
|
|
16
|
+
|
|
17
|
+
<div class="controls">
|
|
18
|
+
<button class="js-resize-random">Resize random widget</button>
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<div class="gridster">
|
|
22
|
+
<ul>
|
|
23
|
+
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0</li>
|
|
24
|
+
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li>
|
|
25
|
+
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
|
|
26
|
+
<li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
|
|
27
|
+
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
|
|
28
|
+
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
|
|
29
|
+
<li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
|
|
30
|
+
<li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
|
|
31
|
+
<li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>
|
|
32
|
+
<li data-row="1" data-col="5" data-sizex="1" data-sizey="3">9</li>
|
|
33
|
+
</ul>
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
<script type="text/javascript">
|
|
37
|
+
function getRandomInt (min, max) {
|
|
38
|
+
return Math.floor(Math.random() * (max - min + 1)) + min;
|
|
39
|
+
}
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
<script type="text/javascript">
|
|
43
|
+
var gridster;
|
|
44
|
+
|
|
45
|
+
$(function () {
|
|
46
|
+
|
|
47
|
+
gridster = $(".gridster ul").gridster({
|
|
48
|
+
widget_base_dimensions: [100, 100],
|
|
49
|
+
widget_margins: [5, 5],
|
|
50
|
+
helper: 'clone',
|
|
51
|
+
resize: {
|
|
52
|
+
enabled: true
|
|
53
|
+
}
|
|
54
|
+
}).data('gridster');
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
$('.js-resize-random').on('click', function () {
|
|
58
|
+
gridster.resize_widget(gridster.$widgets.eq(getRandomInt(0, 9)),
|
|
59
|
+
getRandomInt(1, 4), getRandomInt(1, 4))
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
});
|
|
63
|
+
</script>
|
|
64
|
+
</body>
|
|
65
|
+
</html>
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<head>
|
|
3
|
+
<meta charset="utf-8">
|
|
4
|
+
<title>Gridster Responsive Demo</title>
|
|
5
|
+
|
|
6
|
+
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
|
|
7
|
+
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
|
|
8
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
|
9
|
+
<script src="../dist/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
|
|
10
|
+
|
|
11
|
+
<script type="text/javascript">
|
|
12
|
+
var gridster = null;
|
|
13
|
+
$(document).ready(function () {
|
|
14
|
+
gridster = $(".gridster ul").gridster({
|
|
15
|
+
widget_base_dimensions: ['auto', 140],
|
|
16
|
+
autogenerate_stylesheet: true,
|
|
17
|
+
min_cols: 1,
|
|
18
|
+
max_cols: 6,
|
|
19
|
+
widget_margins: [5, 5],
|
|
20
|
+
resize: {
|
|
21
|
+
enabled: true
|
|
22
|
+
}
|
|
23
|
+
}).data('gridster');
|
|
24
|
+
$('.gridster ul').css({'width': $(window).width()});
|
|
25
|
+
});
|
|
26
|
+
</script>
|
|
27
|
+
</head>
|
|
28
|
+
<body>
|
|
29
|
+
<div class="content">
|
|
30
|
+
<h1>Responsive Layout</h1>
|
|
31
|
+
<p>This demo represents using the branch in responsive mode. This makes the grid as wide as the screen and responds to changes in browser
|
|
32
|
+
width.</p>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="gridster">
|
|
35
|
+
<ul>
|
|
36
|
+
<li data-sizey="2" data-sizex="2" data-col="4" data-row="1">
|
|
37
|
+
<div class="gridster-box">
|
|
38
|
+
<div class="handle-resize"></div>
|
|
39
|
+
</div>
|
|
40
|
+
</li>
|
|
41
|
+
<li data-sizey="1" data-sizex="1" data-col="1" data-row="3">
|
|
42
|
+
<div class="gridster-box">
|
|
43
|
+
<div class="handle-resize"></div>
|
|
44
|
+
</div>
|
|
45
|
+
</li>
|
|
46
|
+
<li data-sizey="1" data-sizex="1" data-col="2" data-row="3">
|
|
47
|
+
<div class="gridster-box">
|
|
48
|
+
<div class="handle-resize"></div>
|
|
49
|
+
</div>
|
|
50
|
+
</li>
|
|
51
|
+
<li data-sizey="2" data-sizex="2" data-col="1" data-row="1">
|
|
52
|
+
<div class="gridster-box">
|
|
53
|
+
<div class="handle-resize"></div>
|
|
54
|
+
</div>
|
|
55
|
+
</li>
|
|
56
|
+
<li data-sizey="1" data-sizex="1" data-col="3" data-row="1">
|
|
57
|
+
<div class="gridster-box">
|
|
58
|
+
<div class="handle-resize"></div>
|
|
59
|
+
</div>
|
|
60
|
+
</li>
|
|
61
|
+
<li data-sizey="1" data-sizex="1" data-col="3" data-row="3">
|
|
62
|
+
<div class="gridster-box">
|
|
63
|
+
<div class="handle-resize"></div>
|
|
64
|
+
</div>
|
|
65
|
+
</li>
|
|
66
|
+
<li data-sizey="1" data-sizex="1" data-col="4" data-row="3">
|
|
67
|
+
<div class="gridster-box">
|
|
68
|
+
<div class="handle-resize"></div>
|
|
69
|
+
</div>
|
|
70
|
+
</li>
|
|
71
|
+
<li data-sizey="1" data-sizex="1" data-col="6" data-row="1">
|
|
72
|
+
<div class="gridster-box">
|
|
73
|
+
<div class="handle-resize"></div>
|
|
74
|
+
</div>
|
|
75
|
+
</li>
|
|
76
|
+
<li data-sizey="1" data-sizex="1" data-col="5" data-row="3">
|
|
77
|
+
<div class="gridster-box">
|
|
78
|
+
<div class="handle-resize"></div>
|
|
79
|
+
</div>
|
|
80
|
+
</li>
|
|
81
|
+
<li data-sizey="1" data-sizex="1" data-col="3" data-row="2">
|
|
82
|
+
<div class="gridster-box">
|
|
83
|
+
<div class="handle-resize"></div>
|
|
84
|
+
</div>
|
|
85
|
+
</li>
|
|
86
|
+
<li data-sizey="1" data-sizex="1" data-col="6" data-row="2">
|
|
87
|
+
<div class="gridster-box">
|
|
88
|
+
<div class="handle-resize"></div>
|
|
89
|
+
</div>
|
|
90
|
+
</li>
|
|
91
|
+
</ul>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
</body>
|
|
96
|
+
</html>
|