-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.html
121 lines (115 loc) · 2.8 KB
/
app.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
<!doctype html>
<head>
<meta charset="utf-8">
<title> Layout </title>
<script type="text/javascript" src="http://cdn.webix.com/edge/webix_debug.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.webix.com/edge/webix.css">
<script type="text/javascript" src="testdata.js"></script>
<style type="text/css">
.blueBackground{
background-color: #87CEFA;
color: white;
}
.grayBackground{
background-color: #F2F2F2;
}
.name{
color: white;
font-size: 20px;
font-weight:bold;
padding-left:30px;
}
.status{
color: green;
font-size: 16px;
font-weight:bold;
text-align:center;
}
.license{
text-align:center;
}
.greenbutton .webixtype_base{
border:none;
background-color:#90ee90;
}
.profileButton .webix_img_btn{
color:white;
font-size: 18px;
}
.profileButton .webix_icon_btn{
color:white;
}
.webix_view .webix_fieldset fieldset{
border: none;
border-top: 1px solid #dedede;
}
.line{
border-bottom: 1px solid #dedede;
}
</style>
</head>
<body>
<script type="text/javascript" charset="utf-8">
webix.ready(function(){
var top = {
view:"layout", css:"blueBackground", type: "header",
cols:[
{view:"label", css:"name", label:"My App"},
{},
{view:"button", css:"profileButton", type:"icon", icon:"user", label:"Profile", width:120}
]
};
var content = {
view:"layout",
css:"line",
cols:[
{rows:[
{
css:"grayBackground",
view:"list",
id:"mylist",
width:200,
autoheight:true,
scroll:false,
data:[ "Dashboard", "Users", "Products", "Locations" ]
},
{ },
{ view:"label", css:"status", label:"Connected ✔"}
], gravity: 0.6, css:"grayBackground"},
{
view:"datatable",
height:500,
columns:[
{ id:"title", header:"Title", width:280},
{ id:"year", header:"Year", width:100},
{ id:"votes", header:"Votes", width:100},
{ id:"rating", header:"Rating", width:100},
{ id:"rank", header:"Rank", width:100}
],
data:small_film_set
},
{ gravity: 0.7,
view:"fieldset",
label:"EDIT FILMS",
body:{
rows:[
{ view:"text", value:"Title", label:"Title"},
{ view:"text", value:"Year", label:"Year"},
{ view:"text", value:"Rating", label:"Rating"},
{ view:"text", value:"Votes", label:"Votes"},
{ cols:[{view:"button", value:"Add new", css:"greenbutton"},{view:"button", value:"Clear"}]}
]
}
}
]
};
var bottom = {
view:"template", css:"license", template:"The software is provided by <a href='https://webix.com/'>https://webix.com/</a>. All rights reserved ©."
};
webix.ui({
rows:[top,content,bottom]
});
});
</script>
</body>
</html>