Form Style //JavaScript Repository

Description

Allows changing the visual of checkbox and radio inputs with images, without loosing any functionality.
Created: 2005.12.19 - Modified 2013.09.17

Dependencies

General » Manipulador de Eventos

Code (Download)

//+ Carlos R. L. Rodrigues
//@ http://jsfromhell.com/forms/style [rev. #5]

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);
}

Example (Example)

<form id="f" action="" method="get">
    <fieldset>
    <legend>Exemplo usando <a href="/classes/preloader">Preloader</a></legend>
    <div style="float: left">
    <label for="c1">Check 1</label> <input type="checkbox" title="Teste title" id="c1" name="c" value="check_1" />
    <label for="c2">Check 2</label> <input type="checkbox" checked="checked" id="c2" name="c" value="check_2" />
    <label for="c3">Check 3</label> <input type="checkbox" id="c3" name="c" value="check_3" />
    </div>
    <div style="float: left; margin-left: 80px;">
    <label for="r1">Radio 1</label> <input type="radio" id="r1" name="r" value="radio_1" />
    <label for="r2">Radio 2</label> <input type="radio" id="r2" name="r" value="radio_2" />
    <label for="r3">Radio 3</label> <input type="radio" id="r3" checked="checked" name="r" value="radio_3" />
    </div>
    <br style="clear: both;" />
    <input type="submit" value="Post" />
    <input type="reset" value="Reset" />
    <input type="button" value="JS Check Boxes" name="cAll" />
    <input type="button" value="JS Uncheck Boxes" name="uAll" />
    <span id="msg" style="background: #D00; color: #FFF; font: bold 11px verdana;">Loading images...</span>
    </fieldset>
</form>
<script type="text/javascript" src="/js/preloader.js"></script>
<script type="text/javascript">
//<![CDATA[

var box = new FormStyle("f"), rad = new FormStyle("f");

box.unchecked({
    initial: "/etc/boxU.gif",
    over: "/etc/boxUH.gif",
    click: "/etc/boxUC.gif"
});
box.checked({
    initial: "/etc/boxC.gif",
    over: "/etc/boxCH.gif",
    click: "/etc/boxCC.gif"
});
rad.unchecked({
    initial: "/etc/rdU.gif",
    over: "/etc/rdUC.gif"
});
rad.checked({
    initial: "/etc/rdC.gif",
    over: "/etc/rdCC.gif"
});


var p = new Preloader();
var i, l = (i = ["boxU", "boxUH", "boxUC", "boxC", "boxCH", "boxCC", "rdU", "rdUC", "rdC", "rdCC"]).length;
while(l--) p.add("/etc/" + i[l] + ".gif");
p.onComplete = function(){
    document.getElementById("msg").style.display = "none";
    box.apply("c"), rad.apply("r");

    addEvent(document.forms.f.cAll, "click", function(){
        for(var f, l = (f = this.form.c).length; l--;)
            box.check(f[l]);
    });
    addEvent(document.forms.f.uAll, "click", function(){
        for(var f, l = (f = this.form.c).length; l--;)
            box.uncheck(f[l]);
    });
}
p.load();

//]]>
</script>

Help

Constructor

FormStyle(form: String)

Generates an instance of FormStyle.

form: name or id of the form that will be stylized

Methods

FormStyle.checked(states: Object): void

Sets the images that will be used when the input is focused.

states

object containing 3 properties, each one is setted with an image path:

initial = default image
over = when the input receives focus or the mouse is over it
click = when pressing the mouse button

Just the initial property is required.

FormStyle.unchecked(states: Object): void

Sets the images that will be used when the input isn't focused.

states

object containing 3 properties, each one is setted with an image path:

initial = default image
over = when the input receives focus or the mouse is over it
click = when pressing the mouse button

Just the initial property is required.

FormStyle.apply(field: String, [field1: String, ...]): void

Applies the transformation on the informed checkboxes/radios.

field: name of the field
field1, ...: infinity amount of fields

FormStyle.check(field: HTMLInputElement): void

Must be used to check a field instead of "field.checked = true".

field: field reference

FormStyle.uncheck(field: HTMLInputElement): void

Must be used to uncheck a field instead of "field.checked = false".

field: field reference

JSFromHell.com