-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
156 lines (129 loc) · 7.79 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Brick By Brick Demo</title>
<link rel="stylesheet" href="css/brick-by-brick.css" />
</head>
<body>
<div id="layout">
<section id="one" class="hide1" style="background-color:blue;">Fore laboris instituendarum. Officia eram lorem possumus eram e culpa in
incididunt quo cillum non enim incurreret firmissimum, excepteur instituendarum
quo quibusdam. Incurreret amet si mandaremus firmissimum, ad sunt an quem. Sed
quibusdam efflorescere. A labore nulla si expetendis.
<div>Test Inner Content</div>
<div>Test Inner Content</div>
<div>Test Inner Content</div>
</section>
<div id="two" class="delete2" style="background-color:silver;">Duis adipisicing ullamco aliqua mentitum nam ne multos te multos, cupidatat quae
enim excepteur magna, qui admodum exquisitaque, ut de multos legam illum, et
labore proident, labore pariatur ab ingeniis, ea laboris ut probant. Et ubi
tamen admodum, se lorem proident si occaecat varias summis eiusmod dolore,
multos doctrina domesticarum. Ab fugiat fugiat sint expetendis ubi in nulla ita
quorum an an fore sempiternum, si culpa id anim. Et arbitror sempiternum, varias
fabulas instituendarum est commodo te aute de malis se ab tamen cernantur. Sunt
qui commodo ad fugiat a cernantur quorum aliqua ullamco aute, incurreret iis
noster officia, commodo firmissimum te incurreret. Incurreret eu varias.</div>
<div id="three" class="hide2" data-something="something" style= "background-color:green;">Possumus quis esse ab duis, iudicem instituendarum ab fabulas ad eu ut veniam
varias quem, quem appellat a cupidatat. In quem cernantur ex varias
concursionibus doctrina elit commodo. Nulla hic offendit. Consequat de magna,
doctrina quorum expetendis, legam de cupidatat, se duis arbitror praetermissum.
Sed minim eram ipsum eiusmod, e summis consequat sempiternum o senserit est
labore proident, id nulla ipsum tamen incurreret. </div>
<div id="four" class="hide1" style="background-color:blue;">Sed summis doctrina. Se nulla quae tamen aliquip e magna arbitror te tempor.
Quorum appellat id aliquip iis quo nescius ne expetendis, an veniam admodum
distinguantur ut ab eram mandaremus sempiternum ita de ad fugiat summis anim,
malis sed quo esse incididunt, legam mentitum est incurreret, non minim eram
ipsum mandaremus. Quo cupidatat imitarentur, incurreret est incididunt, arbitror
dolore quem quibusdam quae do mentitum enim legam iis veniam, de duis
voluptatibus an est mandaremus distinguantur, quorum mandaremus cupidatat, est
tamen possumus voluptate.</div>
<div id="five" class="delete1" style="background-color:red;" >Qui admodum fidelissimae quo magna aliquip te fidelissimae se aliqua ne se amet
occaecat ut ne an veniam anim quae. An nisi veniam quo deserunt aut commodo
cillum occaecat expetendis. Illum se nam velit officia, sint non arbitror et
tamen, te si duis illum lorem iis ubi singulis distinguantur. E quis ullamco
proident, amet o nescius hic litteris o malis et ullamco illum cillum id varias,
sed ea nisi labore dolor et e non amet malis eram, ipsum exercitation singulis
aliqua fabulas, fugiat voluptate de comprehenderit.</div>
<div id="six"class="hide1" style="background-color:blue;">Se sint tempor aliquip, ubi amet vidisse transferrem, aut officia si cupidatat,
de probant ita fabulas. Veniam expetendis officia ne a aute duis est nescius.
Noster iis an fore probant ad officia ab anim pariatur in multos arbitror
mentitum, magna arbitror incididunt, esse vidisse ne possumus, cillum
adipisicing ingeniis quis occaecat ita ab ea anim offendit sed ad aliqua nescius
iudicem. Aut noster deserunt coniunctione, ullamco te fugiat non ita aute
ullamco iudicem, cupidatat e culpa. Tamen tractavissent nescius culpa vidisse e
et ne comprehenderit, hic iis velit aliquip, quo expetendis adipisicing. Sint
non deserunt ubi veniam.</div>
<div id="seven" class="hide2" style="background-color: green;">Litteris multos do proident consectetur. Quae probant o duis veniam, sunt
nostrud ut quibusdam a summis ita arbitror, te tamen comprehenderit. Labore ut
iis veniam expetendis, nescius dolore nam commodo despicationes, ne ex dolore
dolore enim, laboris quem qui commodo imitarentur.</div>
<div id="eight" class="delete1" style="background-color:red;" >Senserit domesticarum ut incididunt, nisi fabulas an sunt ipsum. Varias appellat
est firmissimum. Quid an do fugiat cupidatat. Probant varias summis ullamco
duis, in nisi incurreret occaecat non mandaremus consectetur ita incididunt de
nam magna sunt si litteris, iis consequat domesticarum, quae eiusmod admodum, se
tamen arbitrantur, sed enim quo fugiat.</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/brick-by-brick.js"></script>
<div id="test-cont" style="margin: 0 auto; height: 200px; width:200px;">
<p id="hide1" ><a style="color:blue;" href="#">Hide 1</a></p>
<p id="hide2"><a href="#" style="color:green;">Hide 2 </a></p>
<p id="show1"><a href="#" style="color:blue;">Show 1</a></p>
<p id="show2"><a href="#" style="color:green;">Show 2</a></p>
<p id="prepend"><a href="#" style="color:black;">Prepend </a></p>
<p id="append"><a href="#" style="color:black;">Append</a></p>
<p id="delete1"><a href="#" style="color:red;">Delete1</a></p>
<p id="delete2"><a href="#" style="color:silver;">Delete2</a></p>
<p id="end"><a href="#" style="color:black;">End</a></p>
<p id="reload"><a href="#" style="color:black;">Reload</a></p>
<div class="existing" id="existing1" data-role="footer">Existing item 1</div>
<div class="existing" id="existing2" data-role="footer">Existing item 2</div>
</div>
<script>
$(document).ready(function(){
var elementArray = [".delete1", "#two", "[data-something='something']"], //#two, #three, #five, #eight
elementArray2 = ["#existing1", "#existing2"],
elementArray3 = [".hide1"], //#one, #four, #six
elementArray4 = [".hide2"], //#three, #seven
elementArray5 = [".delete1"]; //#five, #eight
elementArray6 = [".delete2"]; //#two
append = ["<div class='item' id='nine'>Appended: Senserit domesticarum ut incididunt</div>", "<div class='item' id='ten'>Appended: amen tractavissent nescius culpa vidisse.</div>"],
prepend = ["<div id='prep1' class='item'>Prepended: Litteris multos do proident consectetur.</div>", "<div id='prep2' class='item'>Prepended: Sed summis doctrina.</div>",
$("<div/>", {"class": "item", "id": "prep3", "text": "Created via an object literal" })];
$('#layout').layout();
$('#prepend').on('click',function(){
$('#layout').layout('addBefore', prepend);
});
$('#append').on('click',function(){
$('#layout').layout('addAfter', append);
});
$('#hide1').on('click',function(){
$('#layout').layout('hideItems', elementArray3, 2000);
});
$("#hide2").on('click', function() {
$('#layout').layout('hideItems', elementArray4, 3000);
});
$("#show1").on('click', function() {
$('#layout').layout('showItems', elementArray3);
});
$("#show2").on('click', function() {
$('#layout').layout('showItems', elementArray4);
});
$("#delete1").on('click', function() {
$('#layout').layout('removeItems', elementArray5, 2000);
});
$("#delete2").on('click', function() {
$('#layout').layout('removeItems', elementArray6, 2000);
});
$("#end").on('click',function(){
$('#layout').layout('end')
});
$("#reload").on('click',function(){
$('#layout').layout('reload')
});
$('#layout').layout('addAfter', elementArray2);
});
</script>
</body>
</html>