-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.htm
86 lines (80 loc) · 2.31 KB
/
demo.htm
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
<!--
Sciter Tray Menu
https://github.com/MustafaHi/Sciter-Tray
-->
<html>
<head>
<title>TrayIcon demo</title>
<style>
/* Tray popup style */
#trayPopup {
width: 150dip;
border-radius: 4dip;
overflow: hidden;
box-shadow: 0 4px 6px rgba(50,50,93,0.7), 0 1px 3px rgba(0,0,0,0.4);
}
li {
display: block;
padding: 10dip;
background: #fff;
font-size: 15dip;
font-weight: 500;
color: #222;
}
li:hover {
background: #ddd;
}
.header { font-weight: bold; font-size: 12dip; }
button {
min-width: 4.5em;
}
</style>
<script src="tray.tis" type="text/tiscript"></script> <!-- TISCRIPT -->
<script type="text/tiscript">
// include "tray.tis"
Tray.init();
event click $(#toggleMenu)
{
Tray.menu = Tray.menu?.isElement ? undefined : $(#trayPopup);
this.value = Tray.menu ? "POPUP" : "WINDOW";
}
event click $(#toggleCentered)
{
Tray.center = !Tray.center;
this.value = Tray.center ? "CENTERED" : "NOT CENTERED";
}
event click $(#show) { view.state = View.WINDOW_SHOWN; }
event click $(#hide) { view.state = View.WINDOW_HIDDEN; }
event click $(#exit) { view.close(); }
</script>
<script src="tray.js" type="text/javascript"></script> <!-- JAVASCRIPT -->
<script type="text/javascript" type="module">
// import { Tray } from "tray.js"; // Prefix line:16 in tray.js with `export`
Tray.init();
document.getElementById("toggleMenu").on("click", function(evt, el) {
Tray.menu = Tray.menu instanceof Element ? undefined : document.getElementById("trayPopup");
el.innerHTML = Tray.menu ? "POPUP" : "WINDOW";
});
document.getElementById("toggleCentered").on("click", function(evt, el) {
Tray.center = !Tray.center;
el.innerHTML = Tray.center ? "CENTERED" : "NOT CENTERED";
});
document.$("#show").on("click", () => { Window.this.state = Window.WINDOW_SHOWN; });
document.$("#hide").on("click", () => { Window.this.state = Window.WINDOW_HIDDEN; });
document.$("#exit").on("click", () => { Window.this.close(); });
</script>
<popup #trayPopup>
<div>
<li #show>Show</li>
<li #hide>Hide</li>
<li #exit>Exit</li>
</div>
</popup>
</head>
<body>
You can Interact with the
<button #toggleMenu>WINDOW</button>
tray menu bellow that is
<button #toggleCentered>CENTERED</button>
</body>
</html>