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
data/demos/SwapDrop.html
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Gridster Grid Swapping Demo</title>
|
|
6
|
+
|
|
7
|
+
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
|
|
8
|
+
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
|
|
9
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
|
10
|
+
<script src="../dist/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
|
|
11
|
+
|
|
12
|
+
<script type="text/javascript">
|
|
13
|
+
var gridster = "";
|
|
14
|
+
$(document).ready(function () {
|
|
15
|
+
$(".gridster ul").gridster({
|
|
16
|
+
widget_margins: [10, 10],
|
|
17
|
+
widget_base_dimensions: [140, 140],
|
|
18
|
+
shift_larger_widgets_down: false
|
|
19
|
+
});
|
|
20
|
+
});
|
|
21
|
+
</script>
|
|
22
|
+
</head>
|
|
23
|
+
<body>
|
|
24
|
+
<style>
|
|
25
|
+
.gridster, .content {
|
|
26
|
+
width: 940px;
|
|
27
|
+
margin: 0 auto;
|
|
28
|
+
|
|
29
|
+
}
|
|
30
|
+
</style>
|
|
31
|
+
<div class="content">
|
|
32
|
+
<h1>Grid with larger widgets swapping spots with smaller ones</h1>
|
|
33
|
+
<p>This demo represents using the branch in swap mode. This works best with shift_larger_widgets_down set to "false". However, smaller widgets do
|
|
34
|
+
not displace larger ones.</p>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="gridster">
|
|
37
|
+
<ul style="height: 480px; position: relative; ">
|
|
38
|
+
<li data-row="1" data-col="1" data-sizex="2" data-sizey="1" class="gs_w"></li>
|
|
39
|
+
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1" class="gs_w"></li>
|
|
40
|
+
|
|
41
|
+
<li data-row="3" data-col="2" data-sizex="2" data-sizey="1" class="gs_w"></li>
|
|
42
|
+
<li data-row="1" data-col="3" data-sizex="2" data-sizey="2" class="gs_w"></li>
|
|
43
|
+
|
|
44
|
+
<li class="try gs_w" data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
|
|
45
|
+
<li data-row="2" data-col="1" data-sizex="2" data-sizey="1" class="gs_w"></li>
|
|
46
|
+
<li data-row="3" data-col="4" data-sizex="1" data-sizey="1" class="gs_w"></li>
|
|
47
|
+
|
|
48
|
+
<li data-row="1" data-col="6" data-sizex="1" data-sizey="1" class="gs_w"></li>
|
|
49
|
+
<li data-row="3" data-col="5" data-sizex="1" data-sizey="1" class="gs_w"></li>
|
|
50
|
+
|
|
51
|
+
<li data-row="2" data-col="5" data-sizex="1" data-sizey="1" class="gs_w"></li>
|
|
52
|
+
<li data-row="2" data-col="6" data-sizex="1" data-sizey="2" class="gs_w"></li>
|
|
53
|
+
</ul>
|
|
54
|
+
</div>
|
|
55
|
+
</body>
|
|
56
|
+
</html>
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Demo » Add widgets dynamically » 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
|
+
|
|
10
|
+
</head>
|
|
11
|
+
|
|
12
|
+
<body>
|
|
13
|
+
|
|
14
|
+
<h1>Add widgets dynamically</h1>
|
|
15
|
+
|
|
16
|
+
<p>Create a grid adding widgets from an Array (not from HTML) using <code>add_widget</code> method. Widget position (col, row) not specified.</p>
|
|
17
|
+
|
|
18
|
+
<div class="gridster">
|
|
19
|
+
<ul></ul>
|
|
20
|
+
</div>
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
<script type="text/javascript" id="code">
|
|
24
|
+
var gridster;
|
|
25
|
+
|
|
26
|
+
$(function () {
|
|
27
|
+
|
|
28
|
+
gridster = $(".gridster > ul").gridster({
|
|
29
|
+
widget_margins: [5, 5],
|
|
30
|
+
widget_base_dimensions: [100, 55]
|
|
31
|
+
}).data('gridster');
|
|
32
|
+
|
|
33
|
+
var widgets = [
|
|
34
|
+
['<li>0</li>', 1, 2],
|
|
35
|
+
['<li>1</li>', 3, 2],
|
|
36
|
+
['<li>2</li>', 3, 2],
|
|
37
|
+
['<li>3</li>', 2, 1],
|
|
38
|
+
['<li>4</li>', 4, 1],
|
|
39
|
+
['<li>5</li>', 1, 2],
|
|
40
|
+
['<li>6</li>', 2, 1],
|
|
41
|
+
['<li>7</li>', 3, 2],
|
|
42
|
+
['<li>8</li>', 1, 1],
|
|
43
|
+
['<li>9</li>', 2, 2],
|
|
44
|
+
['<li>10</li>', 1, 3]
|
|
45
|
+
];
|
|
46
|
+
|
|
47
|
+
$.each(widgets, function (i, widget) {
|
|
48
|
+
gridster.add_widget.apply(gridster, widget)
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
});
|
|
52
|
+
</script>
|
|
53
|
+
</body>
|
|
54
|
+
</html>
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
body {
|
|
2
|
+
background: #004756;
|
|
3
|
+
font-size: 16px;
|
|
4
|
+
font-family: 'Helvetica Neue', Arial, sans-serif;
|
|
5
|
+
color: #ffffff;
|
|
6
|
+
margin: 0;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
h1, h2, h3, p {
|
|
10
|
+
margin: 10px;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
table {
|
|
14
|
+
border-collapse: collapse;
|
|
15
|
+
border-spacing: 0;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* Gridster styles */
|
|
19
|
+
.demo {
|
|
20
|
+
margin: 3em 0;
|
|
21
|
+
padding: 7.5em 0 5.5em;
|
|
22
|
+
background: #004756;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.demo:hover .gridster {
|
|
26
|
+
margin: 0 auto;
|
|
27
|
+
opacity: .8;
|
|
28
|
+
|
|
29
|
+
-webkit-transition: opacity .6s;
|
|
30
|
+
-moz-transition: opacity .6s;
|
|
31
|
+
-o-transition: opacity .6s;
|
|
32
|
+
-ms-transition: opacity .6s;
|
|
33
|
+
transition: opacity .6s;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.content {
|
|
37
|
+
color: white;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.gridster .gs-w {
|
|
41
|
+
background: #61A9CF;
|
|
42
|
+
cursor: pointer;
|
|
43
|
+
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
|
|
44
|
+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.gridster .player {
|
|
48
|
+
-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
|
|
49
|
+
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
|
|
50
|
+
background: #BBB;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.gridster .gs-w.try {
|
|
54
|
+
background-image: url(../img/sprite.png);
|
|
55
|
+
background-repeat: no-repeat;
|
|
56
|
+
background-position: 37px -169px;
|
|
57
|
+
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.gridster .preview-holder {
|
|
61
|
+
border: none !important;
|
|
62
|
+
border-radius: 0 !important;
|
|
63
|
+
background: red !important;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
ul {
|
|
67
|
+
list-style-type: none;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
li {
|
|
71
|
+
list-style: none;
|
|
72
|
+
font-weight: bold
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.gridster ul {
|
|
76
|
+
background-color: #EFEFEF;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.gridster li {
|
|
80
|
+
font-size: 1em;
|
|
81
|
+
font-weight: bold;
|
|
82
|
+
text-align: center;
|
|
83
|
+
line-height: 100%;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.gridster-box {
|
|
87
|
+
position: relative;
|
|
88
|
+
width: 100%;
|
|
89
|
+
height: 100%;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.controls {
|
|
93
|
+
margin-bottom: 20px;
|
|
94
|
+
}
|
|
Binary file
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
// Avoid `console` errors in browsers that lack a console.
|
|
2
|
+
(function () {
|
|
3
|
+
var method;
|
|
4
|
+
var noop = function () {
|
|
5
|
+
};
|
|
6
|
+
var methods = [
|
|
7
|
+
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
|
|
8
|
+
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
|
|
9
|
+
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
|
|
10
|
+
'timeStamp', 'trace', 'warn'
|
|
11
|
+
];
|
|
12
|
+
var length = methods.length;
|
|
13
|
+
var console = (window.console = window.console || {});
|
|
14
|
+
|
|
15
|
+
while (length--) {
|
|
16
|
+
method = methods[length];
|
|
17
|
+
|
|
18
|
+
// Only stub undefined methods.
|
|
19
|
+
if (!console[method]) {
|
|
20
|
+
console[method] = noop;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}());
|
|
24
|
+
|
|
25
|
+
// Place any jQuery/helper plugins in here.
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Demo » Custom drag handle » 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
|
+
|
|
10
|
+
</head>
|
|
11
|
+
|
|
12
|
+
<body>
|
|
13
|
+
|
|
14
|
+
<h1>Custom drag handle</h1>
|
|
15
|
+
|
|
16
|
+
<p>Restricts dragging from starting unless the mousedown occurs on the specified element(s).</p>
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
<div class="gridster">
|
|
20
|
+
<ul>
|
|
21
|
+
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
|
|
22
|
+
<header>|||</header>
|
|
23
|
+
0
|
|
24
|
+
</li>
|
|
25
|
+
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2">
|
|
26
|
+
<header>|||</header>
|
|
27
|
+
1
|
|
28
|
+
</li>
|
|
29
|
+
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">
|
|
30
|
+
<header>|||</header>
|
|
31
|
+
2
|
|
32
|
+
</li>
|
|
33
|
+
<li data-row="3" data-col="2" data-sizex="3" data-sizey="1">
|
|
34
|
+
<header>|||</header>
|
|
35
|
+
3
|
|
36
|
+
</li>
|
|
37
|
+
|
|
38
|
+
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">
|
|
39
|
+
<header>|||</header>
|
|
40
|
+
4
|
|
41
|
+
</li>
|
|
42
|
+
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">
|
|
43
|
+
<header>|||</header>
|
|
44
|
+
5
|
|
45
|
+
</li>
|
|
46
|
+
<li data-row="4" data-col="2" data-sizex="1" data-sizey="1">
|
|
47
|
+
<header>|||</header>
|
|
48
|
+
6
|
|
49
|
+
</li>
|
|
50
|
+
<li data-row="5" data-col="2" data-sizex="1" data-sizey="1">
|
|
51
|
+
<header>|||</header>
|
|
52
|
+
7
|
|
53
|
+
</li>
|
|
54
|
+
<li data-row="4" data-col="4" data-sizex="1" data-sizey="1">
|
|
55
|
+
<header>|||</header>
|
|
56
|
+
8
|
|
57
|
+
</li>
|
|
58
|
+
|
|
59
|
+
<li data-row="1" data-col="5" data-sizex="1" data-sizey="3">
|
|
60
|
+
<header>|||</header>
|
|
61
|
+
9
|
|
62
|
+
</li>
|
|
63
|
+
</ul>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<style type="text/css">
|
|
67
|
+
|
|
68
|
+
.gridster li header {
|
|
69
|
+
background: #999;
|
|
70
|
+
display: block;
|
|
71
|
+
font-size: 20px;
|
|
72
|
+
line-height: normal;
|
|
73
|
+
padding: 4px 0 6px;
|
|
74
|
+
margin-bottom: 20px;
|
|
75
|
+
cursor: move;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
</style>
|
|
79
|
+
|
|
80
|
+
<script type="text/javascript">
|
|
81
|
+
var gridster;
|
|
82
|
+
|
|
83
|
+
$(function () {
|
|
84
|
+
|
|
85
|
+
gridster = $(".gridster ul").gridster({
|
|
86
|
+
widget_base_dimensions: [100, 120],
|
|
87
|
+
widget_margins: [5, 5],
|
|
88
|
+
draggable: {
|
|
89
|
+
handle: 'header'
|
|
90
|
+
}
|
|
91
|
+
}).data('gridster');
|
|
92
|
+
|
|
93
|
+
});
|
|
94
|
+
</script>
|
|
95
|
+
</body>
|
|
96
|
+
</html>
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Demo » Dynamic grid width » 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>Dynamic grid width</h1>
|
|
14
|
+
|
|
15
|
+
<p>Drag or resize some widgets to the right side. Use <code>max_cols</code> option to set a maximum number of columns for the grid.</p>
|
|
16
|
+
|
|
17
|
+
<div class="gridster">
|
|
18
|
+
<ul>
|
|
19
|
+
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0</li>
|
|
20
|
+
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li>
|
|
21
|
+
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
|
|
22
|
+
<li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
|
|
23
|
+
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
|
|
24
|
+
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
|
|
25
|
+
<li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
|
|
26
|
+
<li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
|
|
27
|
+
<li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>
|
|
28
|
+
<li data-row="1" data-col="5" data-sizex="1" data-sizey="3">9</li>
|
|
29
|
+
</ul>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<script type="text/javascript">
|
|
33
|
+
var gridster;
|
|
34
|
+
|
|
35
|
+
$(function () {
|
|
36
|
+
|
|
37
|
+
var log = document.getElementById('log');
|
|
38
|
+
|
|
39
|
+
gridster = $(".gridster ul").gridster({
|
|
40
|
+
widget_base_dimensions: [100, 55],
|
|
41
|
+
widget_margins: [5, 5],
|
|
42
|
+
autogrow_cols: true,
|
|
43
|
+
resize: {
|
|
44
|
+
enabled: true
|
|
45
|
+
}
|
|
46
|
+
}).data('gridster');
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
});
|
|
50
|
+
</script>
|
|
51
|
+
</body>
|
|
52
|
+
</html>
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Demo » Expandable widgets » 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>Expandable widgets</h1>
|
|
14
|
+
|
|
15
|
+
<p>Expand widgets when hover on them using <code>resize_widget</code> method.</p>
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
<div class="gridster">
|
|
19
|
+
<ul>
|
|
20
|
+
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">0</li>
|
|
21
|
+
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">1</li>
|
|
22
|
+
<li data-row="1" data-col="3" data-sizex="1" data-sizey="1">2</li>
|
|
23
|
+
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">3</li>
|
|
24
|
+
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1">4</li>
|
|
25
|
+
<li data-row="2" data-col="2" data-sizex="1" data-sizey="1">5</li>
|
|
26
|
+
<li data-row="2" data-col="3" data-sizex="1" data-sizey="1">6</li>
|
|
27
|
+
<li data-row="2" data-col="4" data-sizex="1" data-sizey="1">7</li>
|
|
28
|
+
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">8</li>
|
|
29
|
+
<li data-row="3" data-col="2" data-sizex="1" data-sizey="1">9</li>
|
|
30
|
+
<li data-row="3" data-col="3" data-sizex="1" data-sizey="1">10</li>
|
|
31
|
+
<li data-row="3" data-col="4" data-sizex="1" data-sizey="1">11</li>
|
|
32
|
+
</ul>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<script type="text/javascript">
|
|
36
|
+
function getRandomInt (min, max) {
|
|
37
|
+
return Math.floor(Math.random() * (max - min + 1)) + min;
|
|
38
|
+
}
|
|
39
|
+
</script>
|
|
40
|
+
|
|
41
|
+
<script type="text/javascript">
|
|
42
|
+
var gridster;
|
|
43
|
+
|
|
44
|
+
gridster = $(".gridster ul").gridster({
|
|
45
|
+
widget_base_dimensions: [100, 100],
|
|
46
|
+
widget_margins: [5, 5],
|
|
47
|
+
helper: 'clone'
|
|
48
|
+
}).data('gridster');
|
|
49
|
+
|
|
50
|
+
gridster.$el.ready(function () {
|
|
51
|
+
|
|
52
|
+
// resize widgets on hover
|
|
53
|
+
gridster.$el
|
|
54
|
+
.on('mouseenter', 'li', function () {
|
|
55
|
+
gridster.resize_widget($(this), 3, 3);
|
|
56
|
+
})
|
|
57
|
+
.on('mouseleave', 'li', function () {
|
|
58
|
+
gridster.resize_widget($(this), 1, 1);
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
});
|
|
62
|
+
</script>
|
|
63
|
+
</body>
|
|
64
|
+
</html>
|