https://www.suda.edu.cn/js/niceforms.js

1
2//Global Variables
3var niceforms = document.getElementsByTagName('form'); var inputs = new Array(); var labels = new Array(); var radios = new Array(); var radioLabels = new Array(); var checkboxes = new Array(); var checkboxLabels = new Array(); var texts = new Array(); var textareas = new Array(); var selects = new Array(); var selectText = "please select"; var agt = navigator.userAgent.toLowerCase(); this.ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1)); var hovers = new Array(); var buttons = new Array(); var isMac = new RegExp('(^|)'+'Apple'+'(|$)');
4
5//Theme Variables - edit these to match your theme
6var selectRightSideWidth = 21;
7var selectLeftSideWidth = 8;
8var selectAreaHeight = 21;
9var selectAreaOptionsOverlap = 2;
10var imagesPath = "images/";
11
12//Initialization function - if you have any other 'onload' functions, add them here
13function init() {
14	if(!document.getElementById) {return false;}
15	//preloadImages();
16	getElements();
17	separateElements();
18	replaceRadios();
19	replaceSelects();
20	
21}
22
23
24//preloading required images
25function preloadImages() {
26	preloads = new Object();
27	preloads[0] = new Image(); preloads[0].src = imagesPath + "button_left_xon.gif";
28	preloads[1] = new Image(); preloads[1].src = imagesPath + "button_right_xon.gif";
29	preloads[2] = new Image(); preloads[2].src = imagesPath + "input_left_xon.gif";
30	preloads[3] = new Image(); preloads[3].src = imagesPath + "input_right_xon.gif";
31	preloads[4] = new Image(); preloads[4].src = imagesPath + "txtarea_bl_xon.gif";
32	preloads[5] = new Image(); preloads[5].src = imagesPath + "txtarea_br_xon.gif";
33	preloads[6] = new Image(); preloads[6].src = imagesPath + "txtarea_cntr_xon.gif";
34	preloads[7] = new Image(); preloads[7].src = imagesPath + "txtarea_l_xon.gif";
35	preloads[8] = new Image(); preloads[8].src = imagesPath + "txtarea_tl_xon.gif";
36	preloads[9] = new Image(); preloads[9].src = imagesPath + "txtarea_tr_xon.gif";
37}
38//getting all the required elements
39function getElements() {
40	var re = new RegExp('(^| )'+'niceform'+'( |$)');
41	for (var nf = 0; nf < document.getElementsByTagName('form').length; nf++) {
42		if(re.test(niceforms[nf].className)) {
43			for(var nfi = 0; nfi < document.forms[nf].getElementsByTagName('input').length; nfi++) {inputs.push(document.forms[nf].getElementsByTagName('input')[nfi]);}
44			for(var nfl = 0; nfl < document.forms[nf].getElementsByTagName('label').length; nfl++) {labels.push(document.forms[nf].getElementsByTagName('label')[nfl]);}
45			for(var nft = 0; nft < document.forms[nf].getElementsByTagName('textarea').length; nft++) {textareas.push(document.forms[nf].getElementsByTagName('textarea')[nft]);}
46			for(var nfs = 0; nfs < document.forms[nf].getElementsByTagName('select').length; nfs++) {selects.push(document.forms[nf].getElementsByTagName('select')[nfs]);}
47		}
48	}
49}
50//separating all the elements in their respective arrays
51function separateElements() {
52	var r = 0; var c = 0; var t = 0; var rl = 0; var cl = 0; var tl = 0; var b = 0;
53	for (var q = 0; q < inputs.length; q++) {
54		if(inputs[q].type == 'radio') {
55			radios[r] = inputs[q]; ++r;
56			for(var w = 0; w < labels.length; w++) {if(labels[w].htmlFor == inputs[q].id) {if(inputs[q].checked) {labels[w].className = "chosen";} radioLabels[rl] = labels[w]; ++rl;}}
57		}
58		if(inputs[q].type == 'checkbox') {
59			checkboxes[c] = inputs[q]; ++c;
60			for(var w = 0; w < labels.length; w++) {if(labels[w].htmlFor == inputs[q].id) {if(inputs[q].checked) {labels[w].className = "chosen";} checkboxLabels[cl] = labels[w]; ++cl;}}
61		}
62		if((inputs[q].type == "text") || (inputs[q].type == "password")) {texts[t] = inputs[q]; ++t;}
63		if((inputs[q].type == "submit") || (inputs[q].type == "button")) {buttons[b] = inputs[q]; ++b;}
64	}
65}
66function replaceRadios() {
67	for (var q = 0; q < radios.length; q++) {
68		//move radios out of the way
69		radios[q].className = "outtaHere";
70		//create div
71		var radioArea = document.createElement('div');
72		if(radios[q].checked) {radioArea.className = "radioAreaChecked";} else {radioArea.className = "radioArea";}
73		radioArea.style.left = findPosX(radios[q]) + 'px';
74		radioArea.style.top = findPosY(radios[q]) + 'px';

75		radioArea.style.margin = "1px";
76		radioArea.id = "myRadio" + q;
77		//insert div
78		radios[q].parentNode.insertBefore(radioArea, radios[q]);
79		//assign actions
80		radioArea.onclick = new Function('rechangeRadios('+q+')');
81		radioLabels[q].onclick = new Function('rechangeRadios('+q+')');
82		if(!this.ie) {radios[q].onfocus = new Function('focusRadios('+q+')'); radios[q].onblur = new Function('blurRadios('+q+')');}
83		radios[q].onclick = radioEvent;
84	}
85	return true;
86}
87function focusRadios(who) {
88	var what = document.getElementById('myRadio'+who);
89	what.style.border = "1px dotted #333"; what.style.margin = "0";
90	return false;
91}
92function blurRadios(who) {
93	var what = document.getElementById('myRadio'+who);
94	what.style.border = "0"; what.style.margin = "1px";
95	return false;
96}
97function checkRadios(who) {
98	var what = document.getElementById('myRadio'+who);
99	others = document.getElementsByTagName('div');
100	for(var q = 0; q < others.length; q++) {if((others[q].className == "radioAreaChecked")&&(others[q].nextSibling.name == radios[who].name)) {others[q].className = "radioArea";}}
101	what.className = "radioAreaChecked";
102}
103function changeRadios(who) {
104	if(radios[who].checked) {
105		for(var q = 0; q < radios.length; q++) {if(radios[q].name == radios[who].name) {radios[q].checked = false; radioLabels[q].className = "";}} 
106		radios[who].checked = true; radioLabels[who].className = "chosen";
107		checkRadios(who);
108	}
109}
110function rechangeRadios(who) {
111	if(!radios[who].checked) {
112		for(var q = 0; q < radios.length; q++) {if(radios[q].name == radios[who].name) {radios[q].checked = false; radioLabels[q].className = "";}}
113		radios[who].checked = true; radioLabels[who].className = "chosen";
114		checkRadios(who);
115	}
116}
117function radioEvent(e) {
118	if (!e) var e = window.event;
119	if(e.type == "click") {for (var q = 0; q < radios.length; q++) {if(this == radios[q]) {changeRadios(q); break;}}}
120}
121function replaceCheckboxes() {
122	for (var q = 0; q < checkboxes.length; q++) {
123		//move checkboxes out of the way
124		checkboxes[q].className = "outtaHere";
125		//create div
126		var checkboxArea = document.createElement('div');
127		if(checkboxes[q].checked) {checkboxArea.className = "checkboxAreaChecked";} else {checkboxArea.className = "checkboxArea";}
128		checkboxArea.style.left = findPosX(checkboxes[q]) + 'px';
129		checkboxArea.style.top = findPosY(checkboxes[q]) + 'px';
130		checkboxArea.style.margin = "1px";
131		checkboxArea.id = "myCheckbox" + q;
132		//insert div
133		checkboxes[q].parentNode.insertBefore(checkboxArea, checkboxes[q]);
134		//asign actions
135		checkboxArea.onclick = new Function('rechangeCheckboxes('+q+')');
136		if(!isMac.test(navigator.vendor)) {checkboxLabels[q].onclick = new Function('changeCheckboxes('+q+')');}
137		else {checkboxLabels[q].onclick = new Function('rechangeCheckboxes('+q+')');}
138		if(!this.ie) {checkboxes[q].onfocus = new Function('focusCheckboxes('+q+')'); checkboxes[q].onblur = new Function('blurCheckboxes('+q+')');}
139		checkboxes[q].onkeydown = checkEvent;
140	}
141	return true;
142}
143function checkEvent(e) {
144	if (!e) var e = window.event;
145	if(e.keyCode == 32) {for (var q = 0; q < checkboxes.length; q++) {if(this == checkboxes[q]) {changeCheckboxes(q);}}} //check if space is pressed
146}
147function replaceSelects() {
148    for(var q = 0; q < selects.length; q++) {
149		//create and build div structure
150		var selectArea = document.createElement('div');
151		var left = document.createElement('div');
152		var right = document.createElement('div');
153		var center = document.createElement('div');
154		var button = document.createElement('a');
155		var text = document.createTextNode(selectText);
156		center.id = "mySelectText"+q;
157		var selectWidth = parseInt(selects[q].className.replace(/width_/g, ""));
158		center.style.width = selectWidth - 10 + 'px';
159		selectArea.style.width = selectWidth + selectRightSideWidth + selectLeftSideWidth + 'px';
160		button.style.width = selectWidth + selectRightSideWidth + selectLeftSideWidth + 'px';
161		button.style.marginLeft = - selectWidth - selectLeftSideWidth + 'px';
162		button.href = "javascript:showOptions("+q+")";
163		button.onkeydown = selectEvent;
164		button.className = "selectButton"; //class used to check for mouseover
165		selectArea.className = "selectArea";
166		selectArea.id = "sarea"+q;
167		left.className = "left";
168		right.className = "right";
169		center.className = "center";
170		right.appendChild(button);
171		center.appendChild(text);
172		selectArea.appendChild(left);
173		selectArea.appendChild(right);
174		selectArea.appendChild(center);
175		//hide the select field
176        selects[q].style.display='none'; 
177		//insert select div
178		selects[q].parentNode.insertBefore(selectArea, selects[q]);

179		//build & place options div
180		var optionsDiv = document.createElement('div');
181		optionsDiv.style.width = selectWidth + 1 + 'px';
182		optionsDiv.className = "optionsDivInvisible";
183		optionsDiv.id = "optionsDiv"+q;
184		optionsDiv.style.left = findPosX(selectArea) + 'px';
185		optionsDiv.style.top = findPosY(selectArea) + selectAreaHeight - selectAreaOptionsOverlap + 'px';
186		//get select's options and add to options div
187		for(var w = 0; w < selects[q].options.length; w++) {
188			var optionHolder = document.createElement('p');
189			var optionLink = document.createElement('a');
190			var optionTxt = document.createTextNode(selects[q].options[w].text);
191			optionLink.href = "javascript:showOptions("+q+"); selectMe('"+selects[q].id+"',"+w+","+q+");";
192			optionLink.appendChild(optionTxt);
193			optionHolder.appendChild(optionLink);
194			optionsDiv.appendChild(optionHolder);
195			//check for pre-selected items
196			if(selects[q].options[w].selected) {selectMe(selects[q].id,w,q);}
197		}
198		//insert options div
199		document.getElementsByTagName("body")[0].appendChild(optionsDiv);
200	}
201}
202function showOptions(g) {
203		elem = document.getElementById("optionsDiv"+g);
204		if(elem.className=="optionsDivInvisible") {elem.className = "optionsDivVisible";}
205		else if(elem.className=="optionsDivVisible") {elem.className = "optionsDivInvisible";}
206		elem.onmouseout = hideOptions;
207}
208function hideOptions(e) { //hiding the options on mouseout
209	if (!e) var e = window.event;
210	var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
211	if(((reltg.nodeName != 'A') && (reltg.nodeName != 'DIV')) || ((reltg.nodeName == 'A') && (reltg.className=="selectButton") && (reltg.nodeName != 'DIV'))) {this.className = "optionsDivInvisible";};
212	e.cancelBubble = true;
213	if (e.stopPropagation) e.stopPropagation();
214}
215function selectMe(selectFieldId,linkNo,selectNo) {
216	//feed selected option to the actual select field
217	selectField = document.getElementById(selectFieldId);
218	for(var k = 0; k < selectField.options.length; k++) {
219		if(k==linkNo) {selectField.options[k].selected = "selected";}
220		else {selectField.options[k].selected = "";}
221	}
222	//show selected option
223	textVar = document.getElementById("mySelectText"+selectNo);
224	var newText = document.createTextNode(selectField.options[linkNo].text);
225	textVar.replaceChild(newText, textVar.childNodes[0]);
226}
227function selectEvent(e) {
228	if (!e) var e = window.event;
229	var thecode = e.keyCode;
230	switch(thecode){
231		case 40: //down
232			var fieldId = this.parentNode.parentNode.id.replace(/sarea/g, "");
233			var linkNo = 0;
234			for(var q = 0; q < selects[fieldId].options.length; q++) {if(selects[fieldId].options[q].selected) {linkNo = q;}}
235			++linkNo;
236			if(linkNo >= selects[fieldId].options.length) {linkNo = 0;}
237			selectMe(selects[fieldId].id, linkNo, fieldId);
238			break;
239		case 38: //up
240			var fieldId = this.parentNode.parentNode.id.replace(/sarea/g, "");
241			var linkNo = 0;
242			for(var q = 0; q < selects[fieldId].options.length; q++) {if(selects[fieldId].options[q].selected) {linkNo = q;}}
243			--linkNo;
244			if(linkNo < 0) {linkNo = selects[fieldId].options.length - 1;}
245			selectMe(selects[fieldId].id, linkNo, fieldId);
246			break;
247		default:
248			break;
249	}
250}
251
252//Useful functions
253function findPosY(obj) {
254	var posTop = 0;
255	while (obj.offsetParent) {posTop += obj.offsetTop; obj = obj.offsetParent;}
256	return posTop;
257}
258function findPosX(obj) {
259	var posLeft = 0;
260	while (obj.offsetParent) {posLeft += obj.offsetLeft; obj = obj.offsetParent;}
261	return posLeft;
262}
263
264window.onload = init;