Posted By

Leech on 07/21/06


Tagged

style forms checkbox radio


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

jkochis
shachi
vali29
satsuma


Form Style v1.3


 / 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

  1. /*
  2. **************************************
  3. * FormStyle Class v1.3 *
  4. * Autor: Carlos R. L. Rodrigues *
  5. **************************************
  6. */
  7.  
  8. //========================================================
  9. // REQUIRES http://www.jsfromhell.com/geral/event-listener
  10. //========================================================
  11.  
  12. FormStyle = function(f){
  13. var o = this, lb = document.getElementsByTagName("label");
  14. o.f = [], o.c = o.u = o.ch = o.uh = "", o.img = function(r, f){
  15. var i = new Image, s = f.style;
  16. i.src = r, i.title = f.title, f._img = i;
  17. s.position = "absolute", s.top = s.left = "-100px";
  18. var md = function(e){
  19. (e.key == 9 && (o._c = 1)) || ((e.key == 32 || (e.button || e.key == 1)) &&
  20. (f._img.src = f.checked ? o.cc || o.c : o.uc || o.u));
  21. },
  22. mv = function(){f._img.src = f.checked ? o.ch || o.c : o.uh || o.u;},
  23. mo = function(){
  24. var i = f._img, c = !o._c;
  25. i.src = f.checked ? i.src.indexOf(o.cc) > -1 && c ? o.cc : o.c :
  26. i.src.indexOf(o.uc) > -1 && c ? o.uc : o.u, o._c = 0;
  27. };
  28. for(var l = lb.length; l--;)
  29. if(f.id == lb[l].htmlFor && !(addEvent(lb[l], "mousedown", md), addEvent(lb[l], "keydown", md),
  30. addEvent(lb[l], "mouseover", mv), addEvent(lb[l], "mouseout", mo))) break;
  31. i.onclick = function(){f.click(), f.focus();};
  32. return addEvent(f, "click", function(){
  33. var f = this;
  34. if(/radio/i.test(f.type))
  35. for(var e = f.form[f.name], j = e.length; j--; e[j]._img.src = o.u);
  36. return f._img.src = f.checked ? o.c : o.u;
  37. }), addEvent(i, "mousedown", md), i.onmouseover = mv, i.onmouseout = mo,
  38. addEvent(f, "focus", mv), addEvent(f, "blur", mo), addEvent(f, "keydown", md), i;
  39. }
  40. o.check = function(f, u){
  41. (!u && f.type == "radio" && !f.click()) || (f.checked = !u, f._img.src = this[u ? "u" : "c"]);
  42. }
  43. o.uncheck = function(f){this.check(f, true);}
  44. addEvent(o.form = document.forms[f], "reset", function(){
  45. setTimeout(function(){
  46. for(var j, a, i = o.f.length; i--;)
  47. if(j = (a = o.f[i]).length)
  48. while(j--) a[j]._img.src = a[j].checked ? o.c : o.u;
  49. else a._img.src = a.checked ? o.c : o.u;
  50. }, 1);
  51. });
  52. }
  53. FormStyle.prototype.checked = function(o){
  54. this.c = o.initial, this.ch = o.over, this.cc = o.click;
  55. }
  56. FormStyle.prototype.unchecked = function(o){
  57. this.u = o.initial, this.uh = o.over, this.uc = o.click;
  58. }
  59. FormStyle.prototype.apply = function(){
  60. var o = this, a, l = (a = arguments).length, f = o.form, i = o.img, x, j;
  61. if(!o.c || !o.u) return;
  62. while(l--)
  63. if(j = (o.f.push(x = f[a[l]]), x).length)
  64. while(j--) x[j].parentNode.insertBefore(i(x[j].checked ? o.c : o.u, x[j]), x[j]);
  65. else x.parentNode.insertBefore(i(x.checked ? o.c : o.u, x), x);
  66. }

Report this snippet  

You need to login to post a comment.