switch

The switch control allows the user to switch an option between two states. Typical usage of this control is seen in user preferences/settings in mobile OS, where a particular setting can be turned on/off by the user by flipping the switch.

  • Extends basecontrol
  • Syntax

    <div data-juci="switch" data-label="Try Switching me"></div>
    <div data-juci="switch" data-label="Switched off initially" data-value="false"></div>
    <div data-juci="switch" data-label="Switched off initially" data-bind="ref: false"></div>
    <div data-juci="switch" data-label="Data bound" data-bind="ref: switcher"></div>
    <div data-juci="switch" data-label="Customized labels and style" data-ontext="YES" data-offtext="NO"
    	data-onclass="juci_error"
    	data-offclass="juci_blue">
    </div>

    Attributes

    • data-offclass {String}
      A string containing style class to apply during off state of the switch control.
    • data-offtext {String}
      A string containing text to display as Off label of the switch control.
    • data-ontext {String}
      A string containing text to display as on label of the switch control.
    • data-onclass {String}
      A string containing style class to apply during on state of the switch control.
    • data-onvalue {String|Number|Boolean}
      A string or numerical value of the control when it is on state.
    • data-juci {String}
      A string with value switch.
    • data-offvalue {String|Number|Boolean}
      A string or numerical value of the control when it is off state.