-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathxgridlayout4.html
60 lines (55 loc) · 2.31 KB
/
xgridlayout4.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<script src="xjs.js" type="text/javascript"></script>
<script src="xgridlayout.js" type="text/javascript"></script>
<style>
:root {
font-family: sans-serif;
}
</style>
</head>
<body>
</body>
</html>
<script>
var xlo = new xgridlayout("grid");
xlo.addRows(
xgridRow.get(xlo, "80px").addCols(
xgridCol.get(xlo, "auto", {style:{ backgroundColor: "black" }, id:"header"}).add(
xjs.withnew(xjs.htmlElements.h1, "title")
.setStyle({ textAlign: "center", color: "white" })
.setHTML("Grid Layout 4")
)
),
xgridRow.get(xlo, "auto").addCols(
xgridCol.get(xlo, "auto", {style:{backgroundColor: "#353535"}}),
xgridCol.get(xlo, "300px", {style:{ backgroundColor: "#202124" }, id:"sidebar"}).add(
xjs.withnew(xjs.htmlElements.button, "sidebar_toggle_btn")
.setSize(30, 30)
.setStyle({ float: "righleftt", margin: "5px", cursor: "pointer" })
.bgColor("#353535")
.append(
xjs.withnew(xjs.htmlElements.i).setStyle({ color: "white" }).setClass("fas fa-bars")
)
.bindEvent("click", function () {
let sidebar = xjs.with("sidebar");
if (sidebar.getWidth(true) == 300) {
//sidebar.setWidth(40);
xjs.animate([sidebar], [{ width: { start: 300, end: 40, ease: xjs.easeTypes.easeInOut }, }], 100);
} else {
//sidebar.setWidth(300);
xjs.animate([sidebar], [{ width: { start: 40, end: 300, ease: xjs.easeTypes.easeInOut }, }], 100);
}
})
)
),
xgridRow.get(xlo, "80px").addCols(
xgridCol.get(xlo, "auto", {style:{ backgroundColor: "black" }, id:"footer"}),
)
).resizeGrid();
</script>