Project

General

Profile

1 3032 perry
<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>