Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 3f5d6fc

Browse files
trooleetroolee
committed
nested grids
1 parent b64accd commit 3f5d6fc

File tree

8 files changed

+113
-15
lines changed

8 files changed

+113
-15
lines changed

‎README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ Inspired by [gridster.js](http://gridster.net). Built with love.
5252
- [Load grid from array](#load-grid-from-array)
5353
- [Override resizable/draggable options](#override-resizabledraggable-options)
5454
- [IE8 support](#ie8-support)
55+
- [Nested grids](#nested-grids)
5556
- [Changes](#changes)
5657
- [v0.2.3 (development version)](#v023-development-version)
5758
- [v0.2.2 (2014-12-23)](#v022-2014-12-23)
@@ -621,6 +622,13 @@ There are at least two more issues with gridstack in IE8 with jQueryUI resizable
621622
droppable. If you have any suggestions about support of IE8 you are welcome here: https://github.com/troolee/gridstack.js/issues/76
622623

623624

625+
## Nested grids
626+
627+
Gridstack may be nested. All nested grids have an additional class `grid-stack-nested` which is assigned automatically
628+
during initialization.
629+
See example: [Nested grid demo](http://troolee.github.io/gridstack.js/demo/nested.html)
630+
631+
624632
Changes
625633
=======
626634

‎demo/nested.html

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<!--[if lt IE 9]>
5+
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
6+
<![endif]-->
7+
8+
<meta charset="utf-8">
9+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
10+
<meta name="viewport" content="width=device-width, initial-scale=1">
11+
<title>Nested grids demo</title>
12+
13+
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
14+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css"/>
15+
<link rel="stylesheet" href="../src/gridstack.css"/>
16+
17+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
18+
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
19+
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
20+
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
21+
<script src="../src/gridstack.js"></script>
22+
23+
<style type="text/css">
24+
.grid-stack {
25+
background: lightgoldenrodyellow;
26+
}
27+
28+
.grid-stack-item-content {
29+
color: #2c3e50;
30+
text-align: center;
31+
background-color: #18bc9c;
32+
}
33+
34+
.grid-stack .grid-stack {
35+
/*margin: 0 -10px;*/
36+
background: rgba(255, 255, 255, 0.3);
37+
}
38+
39+
.grid-stack .grid-stack .grid-stack-item-content {
40+
background: lightpink;
41+
}
42+
</style>
43+
</head>
44+
<body>
45+
<div class="container-fluid">
46+
<h1>Nested grids demo</h1>
47+
48+
<div class="grid-stack">
49+
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="3">
50+
<div class="grid-stack-item-content">
51+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque eius eligendi eos fuga magnam numquam perferendis provident quos rem. Asperiores assumenda dolor error eveniet impedit nihil numquam provident repellat ullam.
52+
</div>
53+
</div>
54+
<div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4">
55+
<div class="grid-stack-item-content">
56+
57+
<div class="grid-stack">
58+
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">1</div></div>
59+
<div class="grid-stack-item" data-gs-x="3" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">2</div></div>
60+
<div class="grid-stack-item" data-gs-x="6" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">3</div></div>
61+
<div class="grid-stack-item" data-gs-x="9" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">4</div></div>
62+
63+
<div class="grid-stack-item" data-gs-x="0" data-gs-y="1" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">5</div></div>
64+
<div class="grid-stack-item" data-gs-x="3" data-gs-y="1" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">6</div></div>
65+
</div>
66+
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
72+
73+
<script type="text/javascript">
74+
$(function () {
75+
var options = {
76+
};
77+
$('.grid-stack').gridstack(options);
78+
});
79+
</script>
80+
</body>
81+
</html>

‎dist/gridstack.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)