toggle

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

Toggle view.

References

views
button().
helpers
protoUI().

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
webix.protoUI({
    name:"toggle",
    _allowsClear:true,
    $init:function(){
        this.attachEvent("onItemClick", function(){
            this.toggle();
        });
    },
    $setValue:function(value){
        var input = this.getInputNode();
        var obj = this._settings;
        var text = (value ? obj.onLabel : obj.offLabel) || obj.label;

        input.setAttribute("aria-pressed", value?"true":false);
        input.value = text;
        if (input.lastChild)
            input.lastChild.nodeValue = " "+text;

        //icon or image button
        if(input.firstChild && input.firstChild.nodeName ==="SPAN" && obj.onIcon && obj.offIcon && obj.onIcon !==obj.offIcon)
            input.firstChild.className = input.firstChild.className.replace((value?obj.offIcon:obj.onIcon),  (value?obj.onIcon:obj.offIcon));

        var parent = input.parentNode;
        if(value)
            webix.html.addCss(parent, "webix_pressed");
        else
            webix.html.removeCss(parent, "webix_pressed");
    },
    toggle:function(){
        this.setValue(!this.getValue());
    },
    getValue:function(){
        var value = this._settings.value;
        return  (!value||value=="0")?0:1;
    },
    defaults:{
        template:function(obj, common){
            var css = obj.value ? " webix_pressed" : "";
            obj.label = (obj.value ? obj.onLabel : obj.offLabel) || obj.label;
            obj.icon = (obj.value ? obj.onIcon : obj.offIcon) || obj.icon;
            var html =  "<div class='webix_el_box"+css+"' style='width:"+obj.awidth+"px; height:"+obj.aheight+"px'>"+common.$renderInput(obj, common)+"</div>";
            html = html.replace(/(button)\s*(?=\w)/, "$1"+(" aria-pressed='"+(obj.value?"true":"false")+"' "));
            return html;
        }
    },
    _set_inner_size:false
}, webix.ui.button);