https://koregos.org/Koregos/OWS/CustomFormElements/custom-form-elements.js

1/*
2
3CUSTOM FORM ELEMENTS
4
5Created by Ryan Fait
6www.ryanfait.com
7
8The only things you may need to change in this file are the following
9variables: checkboxHeight, radioHeight and selectWidth (lines 24, 25, 26)
10
11The numbers you set for checkboxHeight and radioHeight should be one quarter
12of the total height of the image want to use for checkboxes and radio
13buttons. Both images should contain the four stages of both inputs stacked
14on top of each other in this order: unchecked, unchecked-clicked, checked,
15checked-clicked.
16
17You may need to adjust your images a bit if there is a slight vertical
18movement during the different stages of the button activation.
19
20The value of selectWidth should be the width of your select list image.
21
22Visit http://ryanfait.com/ for more information.
23
24*/
25
26var checkboxHeight = "17";
27var radioHeight = "17";
28var selectWidth = "170";
29
30
31/* No need to change anything after this */
32
33
34document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');
35
36var Custom = {
37	init: function(id) {
38		if(!id) id="";
39		
40		var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
41		for(a = 0; a < inputs.length; a++) {
42			if(((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") && ((id=="") || (id==inputs[a].id))){
43				span[a] = document.createElement("span");
44				span[a].className = inputs[a].type;
45
46				if(inputs[a].checked == true) {
47					if(inputs[a].type == "checkbox") {
48						position = "0 -" + (checkboxHeight*2) + "px";
49						span[a].style.backgroundPosition = position;
50					} else {
51						position = "0 -" + (radioHeight*2) + "px";
52						span[a].style.backgroundPosition = position;
53					}
54				}
55				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
56				
57				// S'il y a un événement onchange, il ne faut pas remplacer l'événement
58				if(!inputs[a].onchange) {
59					inputs[a].onchange = Custom.clear;											
60										
61				} else {
62					
63				}	
64				if(!inputs[a].getAttribute("disabled")) {
65					span[a].onmousedown = Custom.pushed;
66					span[a].onmouseup = Custom.check;
67				} else {
68					span[a].className = span[a].className += " disabled";
69				}
70			}
71		}
72		inputs = document.getElementsByTagName("select");
73		for(a = 0; a < inputs.length; a++) {
74			if(((inputs[a].className).indexOf("styled") != -1) && ((id=="") || (id==inputs[a].id))) {
75				option = inputs[a].getElementsByTagName("option");
76				active = option[0].childNodes[0].nodeValue;
77				textnode = document.createTextNode(active);
78				for(b = 0; b < option.length; b++) {
79					if(option[b].selected == true) {
80						textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
81					}
82				}
83				span[a] = document.createElement("span");
84				span[a].className = "select";

85				span[a].id = "select" + inputs[a].name;
86				span[a].appendChild(textnode);
87				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
88				if(!inputs[a].getAttribute("disabled")) {
89				
90					// S'il y a un événement onchange, il ne faut pas remplacer l'événement
91					if(!inputs[a].onchange) {
92						inputs[a].onchange = Custom.choose;
93					} else {
94
95					}				
96														
97				} else {
98					inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
99				}
100			}
101		}
102		document.onmouseup = Custom.clear;
103	},
104	pushed: function() {
105		element = this.nextSibling;
106		if(element.checked == true && element.type == "checkbox") {
107			this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
108		} else if(element.checked == true && element.type == "radio") {
109			this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
110		} else if(element.checked != true && element.type == "checkbox") {
111			this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
112		} else {
113			this.style.backgroundPosition = "0 -" + radioHeight + "px";
114		}
115	},
116	check: function() {
117		element = this.nextSibling;
118		if(element.checked == true && element.type == "checkbox") {
119			this.style.backgroundPosition = "0 0";
120			element.click();
121			element.checked = false;
122		} else {
123			if(element.type == "checkbox") {
124				element.click();
125				this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
126			} else {
127				this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
128				group = this.nextSibling.name;
129				inputs = document.getElementsByTagName("input");
130				for(a = 0; a < inputs.length; a++) {
131					if(inputs[a].name == group && inputs[a] != this.nextSibling) {
132						inputs[a].previousSibling.style.backgroundPosition = "0 0";
133					}
134				}
135			}
136			element.checked = true;
137		}
138	},
139	clear: function() {
140
141		inputs = document.getElementsByTagName("input");
142		for(var b = 0; b < inputs.length; b++) {
143			if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
144				inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
145			} else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
146				inputs[b].previousSibling.style.backgroundPosition = "0 0";
147			} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
148				inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
149			} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
150				inputs[b].previousSibling.style.backgroundPosition = "0 0";
151			}
152		}
153	},
154	choose: function() {
155		option = this.getElementsByTagName("option");
156		for(d = 0; d < option.length; d++) {
157			if(option[d].selected == true) {
158				document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
159			}
160		}
161	}
162}
163
164function customForm_Select_Choose(select) {
165	document.getElementById("select" + select.name).childNodes[0].nodeValue = select.options[select.selectedIndex].childNodes[0].nodeValue;
166}
167
168function customForm_Checkbox_Click(checkbox) {
169
170	if(checkbox.checked == true)
171		checkbox.previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
172	else
173		checkbox.previousSibling.style.backgroundPosition = "0 0";
174		
175}