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
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>qooxdoo » Demo » Sample</title>
<link type="text/css" rel="stylesheet" href="../../css/layout.css"/>
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="../../css/layout_ie.css"/>
<![endif]-->
<script type="text/javascript" src="../../script/sample.js"></script>
</head>
<body>
<script type="text/javascript" src="../../script/layout.js"></script>
<div id="demoDescription">
<p>Test for qx.ui.component.ColorPopup.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var mybtn = new qx.ui.form.Button("Open Popup");
mybtn.setLocation(20, 48);
mybtn.addEventListener("execute", function() {
mypop.setTop(qx.html.Location.getPageBoxBottom(this.getElement()));
mypop.setLeft(qx.html.Location.getPageBoxLeft(this.getElement()));
mypop.show();
});
var myview = new qx.ui.basic.Label("Selected Color");
myview.setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
myview.setLocation(100, 48);
myview.setPadding(3, 6);
myview.setBackgroundImage("core/dotted_white.gif");
myview.addToDocument();
var mytables =
{
core : {
label : "Basic Colors",
values : [ "#000", "#333", "#666", "#999", "#CCC", "#FFF", "red", "green", "blue", "yellow", "teal", "maroon" ]
},
template : {
label : "Template Colors",
values : [ "#B07B30", "#B07BC9", "#E3AEC9", "#7A2A53" ]
},
recent : {
label : "Recent Colors",
// In this case we need named colors or rgb-value-strings, hex is not allowed currently
values : [ "rgb(122,195,134)", "orange" ]
}
}
var mypop = new qx.ui.component.ColorPopup(mytables);
mypop.setLocation(100, 100);
mypop.setValue(new qx.renderer.color.Color("#23F3C1"));
mybtn.addToDocument();
mypop.addToDocument();
mypop.addEventListener("changeValue", function(e) {
this.debug("Value Listener: " + e.getData());
myview.setBackgroundColor(e.getData());
myview.setBackgroundImage(e.getData() ? null : "core/dotted_white.gif");
});
mypop.addEventListener("changeRed", function(e) {
this.debug("Red Listener: " + e.getData());
});
mypop.addEventListener("changeGreen", function(e) {
this.debug("Green Listener: " + e.getData());
});
mypop.addEventListener("changeBlue", function(e) {
this.debug("Blue Listener: " + e.getData());
});
});
</script>
</body>
</html>
|
