checkbox

class webix.ui.checkbox(data)
Arguments:
  • data (object) – A configuration object

Checkbox view.

References

views
text().
helpers
protoUI(), uid().

External references

Official documentation page.

Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
webix.protoUI({
    name:"checkbox",
    defaults:{
        checkValue:1,
        uncheckValue:0,
        template:function(config, common) {
            var id = "x"+webix.uid();
            var rightlabel = "";
            if (config.labelRight){
                rightlabel = "<label class='webix_label_right'>"+config.labelRight+"</label>";
                //user clearly attempts to hide the label, help him
                if (config.labelWidth)
                    config.label = config.label || "&nbsp;";
            }
            var checked = (config.checkValue == config.value);
            var margin = Math.floor((common._settings.aheight-16)/2);
            var ch = common._baseInputHTML("input")+"style='margin-top:"+margin+"px;"+(config.customCheckbox?"display:none":"")+"' id='"+id+"' type='checkbox' "+(checked?"checked='1'":"")+(config.labelRight?" aria-label='"+webix.template.escape(config.labelRight)+"'":"")+"/>";
            var className = "webix_inp_checkbox_border webix_el_group webix_checkbox_"+(checked?"1":"0");
            var customCheckbox = config.customCheckbox || "";
            if(customCheckbox){
                customCheckbox = customCheckbox.replace(/(aria-checked=')\w*(?=')/, "$1"+(config.value == config.checkValue?"true":"false"));
                customCheckbox = customCheckbox.replace(/(aria-label=')\w*(?=')/, "$1"+webix.template.escape(config.labelRight || config.label));
                customCheckbox = customCheckbox.replace(/(aria-invalid=')\w*(?=')/, "$1"+(config.invalid?"true":"false"));
            }
            var html = "<div style='line-height:"+common._settings.cheight+"px' class='"+className+"'>"+ch+customCheckbox+rightlabel+"</div>";
            return common.$renderInput(config, html, id);
        }
    },
    customCheckbox_setter: function(value){
        if( value === true && webix.skin.$active.customCheckbox){
            value = "<a role='presentation' onclick='javascript:void(0)'><button role='checkbox' aria-checked='false' aria-label='' type='button' aria-invalid='' class='webix_custom_checkbox'></button></a>";
        }
        return value;
    },
    focus: function(){
        var input = this.$view.getElementsByTagName(this._settings.customCheckbox?"button":"input")[0];
        if(input)
            input.focus();
    },
    blur: function(){
        var input = this.$view.getElementsByTagName(this._settings.customCheckbox?"button":"input")[0];
        if(input)
            input.blur();
    },
    _init_onchange: function(){},
    $setValue:function(value){
        var isChecked = (value == this._settings.checkValue);
        var parentNode = this.getInputNode()?this.getInputNode().parentNode:null;

        if(parentNode && this._settings.customCheckbox){
            var button = parentNode.getElementsByTagName("BUTTON");
            if(button[0]) button[0].setAttribute("aria-checked", isChecked?"true":"false");
        }
        if(parentNode){
            parentNode.className = parentNode.className.replace(/(webix_checkbox_)\d/,"$1"+(isChecked?1:0));
        }
        this.getInputNode().checked = isChecked;
    },
    toggle:function(){
        var value = (this.getValue() != this._settings.checkValue)?this._settings.checkValue:this._settings.uncheckValue;
        this.setValue(value);
    },
    getValue:function(){
        var value = this._settings.value;
        return  (value == this._settings.checkValue)?this._settings.checkValue:this._settings.uncheckValue;
    },
    $skin:function(){
        if(webix.skin.$active.customCheckbox)
            this.defaults.customCheckbox = true;
    }
}, webix.ui.text);