Switch - globules-io/OGX.JS GitHub Wiki

Switch is a simple switch that toggles between two values.

Stack

Extends

 Uxi, Touch

OML

 {"selector:Switch":{CONFIG}}

Create

 let config = {
      el:_SELECTOR_, //Required, selector
      data:[{label:_STRING_, value:*}, {label:_STRING_, value:*}],  //Defaults to [{label:'OFF', value:0}, {label:'ON', value:1}] //Optional
      labels:true|false, //Optional, display labels, default to true
      enabled:true|false, //Optional, defaults to true
      name:_STRING_, //Optional
      value:*, //The current value
      speed:_INT_ //Optional, animation speed, defaults to 250ms          
 };
 let switch = new OGX.Switch(config);

To create from an OML node, from an object extending Uxi

 let node = {};
 node["#myDiv:Switch"] = config;
 OGX.OML.render(this, OML);

You can also create a Switch on the fly, at runtime, from an object extending Uxi

 let swt = this.create('Switch', config);

or independently

 let swt = OGX.Object.create('Switch', config);

In any case, you can either set the current value via the config object, or via the data-value attribute of your container element. The attribute will be converted to value via the OGX.Data.stringToVal method then removed from the element.

 <div id="mySwitch" data-value="myValue"></div>

Toggle

 switch.toggle();

Enable/Disable

 switch.enable();
 switch.disable();

Events

 OGX.Switch.CHANGE

Get/Set

 switch.val(); //Retrieve value
 switch.val(__value, __trigger); //Set value, trigger 'change' is true

Destroy

 switch.destroy();
⚠️ **GitHub.com Fallback** ⚠️