Skip to content

Commit 2f3390a

Browse files
author
Alain Dumesny
committed
advance demo from web page
thanks @DigitalJo for suggestion #1067
1 parent 0bb7919 commit 2f3390a

File tree

4 files changed

+133
-12
lines changed

4 files changed

+133
-12
lines changed

‎demo/advance.html

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<title>Advanced grid demo</title>
9+
10+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
11+
<link rel="stylesheet" href="demo.css" />
12+
13+
<script type="module" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.esm.js"></script>
14+
<script nomodule="" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.js"></script>
15+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
16+
<script src="../src/jquery-ui.min.js"></script>
17+
<script src="../src/gridstack.js"></script>
18+
<script src="../src/gridstack.jQueryUI.js"></script>
19+
20+
<style type="text/css">
21+
.grid-stack-item-removing {
22+
opacity: 0.8;
23+
filter: blur(5px);
24+
}
25+
26+
#trash {
27+
background: rgba(255, 0, 0, 0.4);
28+
}
29+
</style>
30+
</head>
31+
32+
<body>
33+
<h1>Advanced Demo</h1>
34+
<div class="row">
35+
<div class="col-md-2 d-none d-md-block">
36+
<div id="trash" style="padding: 15px; margin-bottom: 15px;" class="text-center">
37+
<div>
38+
<ion-icon name="trash" style="font-size: 400%"></ion-icon>
39+
</div>
40+
<div>
41+
<span>Drop here to remove!</span>
42+
</div>
43+
</div>
44+
<div class="newWidget grid-stack-item">
45+
<div class="card-body grid-stack-item-content">
46+
<div>
47+
<ion-icon name="add-circle" style="font-size: 400%"></ion-icon>
48+
</div>
49+
<div>
50+
<span>Drag me in into the dashboard!</span>
51+
</div>
52+
</div>
53+
</div>
54+
</div>
55+
<div class="col-sm-12 col-md-10">
56+
<div class="grid-stack" id="advanced-grid" data-gs-width="12" data-gs-animate="yes">
57+
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2">
58+
<div class="grid-stack-item-content">1</div>
59+
</div>
60+
<div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4"
61+
data-gs-no-move="yes" data-gs-no-resize="yes" data-gs-locked="yes">
62+
<div class="grid-stack-item-content">I can't be moved or dragged!
63+
<br>
64+
<ion-icon name="ios-lock" style="font-size:300%"></ion-icon>
65+
</div>
66+
</div>
67+
<div class="grid-stack-item" data-gs-x="8" data-gs-y="0" data-gs-width="2" data-gs-height="2"
68+
data-gs-min-width="2" data-gs-no-resize="yes">
69+
<div class="grid-stack-item-content" style="overflow: hidden">
70+
<p class="card-text text-center" style="margin-bottom: 0">
71+
Drag me!
72+
<p class="card-text text-center" style="margin-bottom: 0">
73+
<ion-icon name="hand" style="font-size: 300%"></ion-icon>
74+
<p class="card-text text-center" style="margin-bottom: 0">
75+
...but don't resize me!
76+
</div>
77+
</div>
78+
<div class="grid-stack-item" data-gs-x="10" data-gs-y="0" data-gs-width="2" data-gs-height="2">
79+
<div class="grid-stack-item-content"> 4</div>
80+
</div>
81+
<div class="grid-stack-item" data-gs-x="0" data-gs-y="2" data-gs-width="2" data-gs-height="2">
82+
<div class="grid-stack-item-content">5</div>
83+
</div>
84+
<div class="grid-stack-item" data-gs-x="2" data-gs-y="2" data-gs-width="2" data-gs-height="4">
85+
<div class="grid-stack-item-content">6</div>
86+
</div>
87+
<div class="grid-stack-item" data-gs-x="8" data-gs-y="2" data-gs-width="4" data-gs-height="2">
88+
<div class="grid-stack-item-content">7</div>
89+
</div>
90+
<div class="grid-stack-item" data-gs-x="0" data-gs-y="4" data-gs-width="2" data-gs-height="2">
91+
<div class="grid-stack-item-content">8</div>
92+
</div>
93+
<div class="grid-stack-item" data-gs-x="4" data-gs-y="4" data-gs-width="4" data-gs-height="2">
94+
<div class="grid-stack-item-content">9</div>
95+
</div>
96+
<div class="grid-stack-item" data-gs-x="8" data-gs-y="4" data-gs-width="2" data-gs-height="2">
97+
<div class="grid-stack-item-content">10</div>
98+
</div>
99+
<div class="grid-stack-item" data-gs-x="10" data-gs-y="4" data-gs-width="2" data-gs-height="2">
100+
<div class="grid-stack-item-content">11</div>
101+
</div>
102+
</div>
103+
</div>
104+
</div>
105+
106+
<script type="text/javascript">
107+
$(function () {
108+
$('#advanced-grid').gridstack({
109+
alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
110+
navigator.userAgent
111+
),
112+
resizable: {
113+
handles: 'e, se, s, sw, w'
114+
},
115+
removable: '#trash',
116+
removeTimeout: 100,
117+
acceptWidgets: '.newWidget'
118+
});
119+
$('.newWidget').draggable({
120+
revert: 'invalid',
121+
scroll: false,
122+
appendTo: 'body',
123+
helper: 'clone'
124+
});
125+
});
126+
</script>
127+
</body>
128+
129+
</html>

‎demo/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
<li><a href="right-to-left(rtl).html">Right-To-Left (RTL) demo</a></li>
1414
<li><a href="serialization.html">Serialization demo</a></li>
1515
<li><a href="two.html">Two grids demo</a></li>
16+
<li><a href="advance.html">Advance demo</a></li>
1617
<li><a href="responsive.html">Resize grid (responsive) demo</a></li>
1718
<li><a href="anijs.html">AniJS demo</a></li>
1819
</ul>

‎demo/two.html

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title>Two grids demo</title>
88

99
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
10-
<link rel="stylesheet" href="../dist/gridstack.css"/>
10+
<link rel="stylesheet" href="demo.css"/>
1111
<link rel="stylesheet" href="../dist/gridstack-extra.css"/>
1212

1313
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
@@ -16,20 +16,10 @@
1616
<script src="../src/gridstack.jQueryUI.js"></script>
1717

1818
<style type="text/css">
19-
#grid1 {
20-
background: lightgoldenrodyellow;
21-
}
22-
2319
#grid2 {
2420
background: lightcyan;
2521
}
2622

27-
.grid-stack-item-content {
28-
color: #2c3e50;
29-
text-align: center;
30-
background-color: #18bc9c;
31-
}
32-
3323
#grid2 .grid-stack-item-content {
3424
background-color: #9caabc;
3525
}
@@ -131,7 +121,7 @@ <h1>Two grids demo</h1>
131121
revert: 'invalid',
132122
handle: '.grid-stack-item-content',
133123
scroll: false,
134-
appendTo: 'body'
124+
appendTo: 'body',
135125
});
136126
});
137127
</script>

‎doc/CHANGES.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ Change log
3131
- add `jquery-ui.js` (and min.js) as minimal subset we need (55k vs 248k), which is now part of `gridstack.all.js`. Include individual parts if you need your own lib instead of all.js
3232
([#1064](https://github.com/gridstack/gridstack.js/pull/1064)).
3333
- changed jquery dependency to lowest we can use (>=1.8) ([#629](https://github.com/gridstack/gridstack.js/issues/629)).
34+
- add advance demo from web site
3435

3536
## v0.5.3 (2019-11-20)
3637

0 commit comments

Comments
 (0)