ARCHIV

JAK na vlastní checkbox

Checkbox je poměrně klasickým prvkem a v html je tedy samozřejmě dostupný. Ovšem vytvořit mu vlastní styl je v podstatě nemožné. Jediné funkční řešení napříč browsery je vytvořit si vlastní, v javascriptu.

13.3.2011 00:00 | Ondřej Tůma | Články autora | přečteno 11133×

Princip je jednoduchý, vytvořit proměnou, ve které bude uložena hodnota ano či ne. Tuto hodnotu budeme potřebovat odeslat společně s ostatními hodnotami ve formuláři a tak se přímo nabízí použít prvek input typu hidden. A protože ovládáme JAK knihovnu, tak to pěkně obalíme nějakou třídou, která se o všechno pěkně postará.

Jednou kód prosím - checkbox s vlastní grafikou

/*
 * CheckBox - checkbox definovany obrazky - tedy vlastnim stylem
 */
var CheckBox = JAK.ClassMaker.makeClass({
    NAME: "CheckBox",
    VERSION: "1.0"
});

CheckBox.prototype.imgFalse = "/check_none.png";
CheckBox.prototype.imgTrue = "/check_green.png";

CheckBox.prototype.$constructor = function(id){
    this.domid = JAK.gel(id);
    this.domval = JAK.gel(id+'_value');
    this.domlb = JAK.gel(id+'_label');

    this.change = this.change.bind(this);
    JAK.Events.addListener(this.domid, 'click', this, "change");
    if (this.domlb)
        JAK.Events.addListener(this.domlb, 'click', this, "change");
}

CheckBox.prototype.setValue = function(value){
    this.domval.value = value;
    if (value == 0)
        this.domid.src = this.imgFalse;
    else
        this.domid.src = this.imgTrue;
}

CheckBox.prototype.change = function(){
    if (this.domval.value == 0) {
        this.domval.value = 1;
        this.domid.src= this.imgTrue;
    } else {
        this.domval.value = 0;
        this.domid.src= this.imgFalse;;
    }
}

makeCheckBox = function(name, parent, value){
    parent = JAK.gel(parent);
    parent.innerHTML
        = '<input type="hidden" name="'+name+'" id="'+name+'_value" />'
        + '<img id="'+name+'" src="http://zeropage.cz/'+CheckBox.prototype.imgFalse+'" alt="check"/>';
    obj = new CheckBox(name);
    obj.setValue(value);
    obj.domid.style.verticalAlign = 'middle';
    return obj;
}

<form>
	<span id="_libi"></span>
	<label for="libi" id="libi_label">Líbí se vám tento checkbox ?</label><br>
	<script type="text/javascript">
		libi = makeCheckBox3('libi', '_libi', 0);
	</script>
	<button type="submit" name="submit">Ok</button>
</form>

Další prosím - třístavový checkbox

/*
 * CheckBox3 - třístavový checkbox, vychází s CheckBox
 */
var CheckBox3 = JAK.ClassMaker.makeClass({
    NAME: "CheckBox3",
    VERSION: "1.0",
    EXTEND: CheckBox
});

CheckBox3.prototype.imgHalf = "/check_gray.png";

CheckBox3.prototype.$constructor = function(id){
    this.$super(id); 
}

CheckBox3.prototype.setValue = function(value){
    this.domval.value = value;

    if (value == 0)
        this.domid.src = this.imgFalse;      // 0, False
    else if (value == 1)
        this.domid.src = this.imgHalf;       // 1, Half, Or, MayBe :D
    else
        this.domid.src = this.imgTrue;       // 2, True
}

CheckBox3.prototype.change = function(){
    if (this.domval.value == 0) {
        this.domval.value = 1;
        this.domid.src= this.imgHalf;
    } else if (this.domval.value == 1) {
        this.domval.value = 2;
        this.domid.src= this.imgTrue;
    } else {
        this.domval.value = 0;
        this.domid.src= this.imgFalse;
    }
}

makeCheckBox3 = function(name, parent, value){
    parent = JAK.gel(parent);
    parent.innerHTML
        = '<input type="hidden" name="'+name+'" id="'+name+'_value" />'
        + '<img id="'+name+'" src="http://zeropage.cz/'+CheckBox.prototype.imgFalse+'" alt="check"/>';
    obj = new CheckBox3(name);
    obj.setValue(value);
    obj.domid.style.verticalAlign = 'middle';
    return obj;
}

Užitková hodnota

Verze pro tisk