|
1
|
<html>
|
|
2
|
|
|
3
|
<script src="../lib/Prototype.js"></script>
|
|
4
|
<script type="text/javascript">
|
|
5
|
|
|
6
|
var one, two, div, msg;
|
|
7
|
|
|
8
|
function init() {
|
|
9
|
|
|
10
|
one = $("one");
|
|
11
|
two = $("two");
|
|
12
|
div = $("div");
|
|
13
|
msg = $("msg");
|
|
14
|
|
|
15
|
Event.observe(div, "click", bar);
|
|
16
|
|
|
17
|
one.checked = true;
|
|
18
|
two.checked = false;
|
|
19
|
|
|
20
|
Event.observe(one, "change", oneClick);
|
|
21
|
Event.observe(two, "change", twoClick);
|
|
22
|
|
|
23
|
}
|
|
24
|
|
|
25
|
function bar(e) {
|
|
26
|
message("clicked div");
|
|
27
|
|
|
28
|
Event.stop(e);
|
|
29
|
|
|
30
|
var status = "one: ";
|
|
31
|
status += (one.checked) ? "checked" : "unchecked";
|
|
32
|
status += " two: ";
|
|
33
|
status += (two.checked) ? "checked" : "unchecked";
|
|
34
|
message(status);
|
|
35
|
}
|
|
36
|
|
|
37
|
function oneClick(e) {
|
|
38
|
message("clicked one");
|
|
39
|
}
|
|
40
|
|
|
41
|
function twoClick(e) {
|
|
42
|
message("clicked two");
|
|
43
|
}
|
|
44
|
|
|
45
|
function message(txt) {
|
|
46
|
msg.innerHTML += " ** " + txt;
|
|
47
|
}
|
|
48
|
|
|
49
|
</script>
|
|
50
|
|
|
51
|
<body onload="init()" onclick="message('clicked body')" onmouseup="message('<br>')">
|
|
52
|
|
|
53
|
<div> The idea here is to simulate the layerswitcher radiobuttons UI
|
|
54
|
without all the overhead of openlayers.
|
|
55
|
<br>
|
|
56
|
<br>
|
|
57
|
There are event handlers attached to the following elements:
|
|
58
|
<br>
|
|
59
|
* Body - Prints message "clicked body" to message area
|
|
60
|
<br>
|
|
61
|
* Blue Div - Prints message "clicked div" to message area, stops
|
|
62
|
the event propagation, prints a message with the
|
|
63
|
status of the two radiobuttons
|
|
64
|
<br>
|
|
65
|
* Radio One - Prints message "clicked one" to message area
|
|
66
|
<br>
|
|
67
|
* Radio Two - Prints message "clicked two" to message area
|
|
68
|
<br>
|
|
69
|
<br>
|
|
70
|
<b>
|
|
71
|
The problem, as you will see if you click the radio buttons
|
|
72
|
themselves, is that their "checked" status seems to update, but
|
|
73
|
their visual UI bit does not. Can we fix this!?!
|
|
74
|
</b>
|
|
75
|
</div>
|
|
76
|
|
|
77
|
<div id="div" style="background-color:blue; margin:50px">
|
|
78
|
<input id="one" type="radio" name="foo"/>
|
|
79
|
<span> one </span>
|
|
80
|
<br>
|
|
81
|
<input id="two" type="radio" name="foo"/>
|
|
82
|
<span> two </span>
|
|
83
|
</div>
|
|
84
|
|
|
85
|
<div id="msg" style="background-color:pink; margin-top:200px">
|
|
86
|
Events:
|
|
87
|
</div>
|
|
88
|
|
|
89
|
</body>
|
|
90
|
</html>
|