/ Published in: JavaScript
URL: http://jsfromhell.com/forms/style
Allows changing the visual of checkbox and radio inputs with images, without loosing any functionality. Created: 2005.12.19
Check example here: http://jsfromhell.com/forms/style/example
Expand |
Embed | Plain Text
/* ************************************** * FormStyle Class v1.3 * * Autor: Carlos R. L. Rodrigues * ************************************** */ //======================================================== // REQUIRES http://www.jsfromhell.com/geral/event-listener //======================================================== FormStyle = function(f){ var o = this, lb = document.getElementsByTagName("label"); o.f = [], o.c = o.u = o.ch = o.uh = "", o.img = function(r, f){ var i = new Image, s = f.style; i.src = r, i.title = f.title, f._img = i; s.position = "absolute", s.top = s.left = "-100px"; var md = function(e){ (e.key == 9 && (o._c = 1)) || ((e.key == 32 || (e.button || e.key == 1)) && (f._img.src = f.checked ? o.cc || o.c : o.uc || o.u)); }, mv = function(){f._img.src = f.checked ? o.ch || o.c : o.uh || o.u;}, mo = function(){ var i = f._img, c = !o._c; i.src = f.checked ? i.src.indexOf(o.cc) > -1 && c ? o.cc : o.c : i.src.indexOf(o.uc) > -1 && c ? o.uc : o.u, o._c = 0; }; for(var l = lb.length; l--;) if(f.id == lb[l].htmlFor && !(addEvent(lb[l], "mousedown", md), addEvent(lb[l], "keydown", md), addEvent(lb[l], "mouseover", mv), addEvent(lb[l], "mouseout", mo))) break; i.onclick = function(){f.click(), f.focus();}; return addEvent(f, "click", function(){ var f = this; if(/radio/i.test(f.type)) for(var e = f.form[f.name], j = e.length; j--; e[j]._img.src = o.u); return f._img.src = f.checked ? o.c : o.u; }), addEvent(i, "mousedown", md), i.onmouseover = mv, i.onmouseout = mo, addEvent(f, "focus", mv), addEvent(f, "blur", mo), addEvent(f, "keydown", md), i; } o.check = function(f, u){ (!u && f.type == "radio" && !f.click()) || (f.checked = !u, f._img.src = this[u ? "u" : "c"]); } o.uncheck = function(f){this.check(f, true);} addEvent(o.form = document.forms[f], "reset", function(){ setTimeout(function(){ for(var j, a, i = o.f.length; i--;) if(j = (a = o.f[i]).length) while(j--) a[j]._img.src = a[j].checked ? o.c : o.u; else a._img.src = a.checked ? o.c : o.u; }, 1); }); } FormStyle.prototype.checked = function(o){ this.c = o.initial, this.ch = o.over, this.cc = o.click; } FormStyle.prototype.unchecked = function(o){ this.u = o.initial, this.uh = o.over, this.uc = o.click; } FormStyle.prototype.apply = function(){ var o = this, a, l = (a = arguments).length, f = o.form, i = o.img, x, j; if(!o.c || !o.u) return; while(l--) if(j = (o.f.push(x = f[a[l]]), x).length) while(j--) x[j].parentNode.insertBefore(i(x[j].checked ? o.c : o.u, x[j]), x[j]); else x.parentNode.insertBefore(i(x.checked ? o.c : o.u, x), x); }
You need to login to post a comment.
