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
| <script type="text/javascript">
// Class générique
var BaseValueHolder = Class.create( {
initialize : function(valuesArray) {
this.values = valuesArray;
this.registered = [];
for(var i=0;i<this.values.length; i++) {
this.registered[i] = [];
}
},
getEventName : function(index) {
return "custom:" + typeof(this) + index
},
setValue : function(index, newValue) {
this.values[index] = newValue;
this.registered[index].each( function(elem) {
this.updateValue(elem, this.values[index]);
}, this);
},
registerElement : function(element, index, setValue) {
setValue = setValue !== false;
if(setValue) {
this.updateValue(element, this.values[index]);
}
this.registered[index].push(element)
}
} );
// Class qui gère le background-color
var BgColorValueHolder = Class.create(BaseValueHolder, {
updateValue : function(elem, val) {
elem.setStyle({backgroundColor: val});
}
});
// Class qui gère la couleur
var ColorValueHolder = Class.create(BaseValueHolder, {
updateValue : function(elem, val) {
elem.setStyle({color: val});
}
});
</script>
<div style="width:100px;height:100px;margin:10px;float:left" id="elem1">
elem1
</div>
<div style="width:100px;height:100px;margin:10px;float:left" id="elem2">
elem2
</div>
<div style="width:100px;height:100px;margin:10px;float:left" id="elem3">
elem3
</div>
<div style="width:100px;height:100px;margin:10px;float:left" id="elem4">
elem4
</div>
<script type="text/javascript">
var _bgcolor = new BgColorValueHolder(["#ff0000","#00ff00","#0000ff"]);
var _color = new ColorValueHolder(["#ff0000","#00ff00","#0000ff"]);
_bgcolor.registerElement($("elem1"), 0);
_bgcolor.registerElement($("elem2"), 1);
_bgcolor.registerElement($("elem3"), 2);
_bgcolor.registerElement($("elem4"), 0, false);
$("elem1").observe("click", function() {
_bgcolor.setValue(0, "#ff00ff");
});
</script> |
