Toggle switch

The toggle switch widget, from the SaVaGe library, if an on/off button that can be used as a more appealing alternative to the standard's checkboxs. Unlike most toggle switchs provided by other libraries, the SaVaGe's toggle switchs can be fully customized in size, shapes and colors.

How to use it

In order to use it, you must only include the D3.js and SaVaGe scripts in your page.

<html>
    <head>
        <script src="d3.v3.min.js" type="text/javascript"></script>
        <script src="savage.toggle-switch.min.js" type="text/javascript"></script>
    </head>
    <body>
        <script type="text/javascript">
            // Add a toggle switch at the end of 'body'.
            SaVaGe.ToggleSwitch();
        </script>
    </body>
</html>

Examples

Basics

The ToggleSwitch() method accepts, as paramater, a single object, whose attributes can be used to customize the widget.

The most fundamental of them are the container attribute, which allows to define (using CSS selectors) the element which is going to serve as container for the widget, and the value attribute, which is used to define the initial value of the widget.

Code

<div id="basic"></div>
<div id="defaultOn"></div>
<script type="text/javascript">
    SaVaGe.ToggleSwitch({container: "#basic"});
    SaVaGe.ToggleSwitch({container: "#defaultOn", value:true});
</script>

Result

Sizes

The width and height attributes allows to define size of the switch, while the radius attribute allows to specify the size of the lever.

Code

<div id="big"></div>
<div id="small-lever"></div>
<script type="text/javascript">
    SaVaGe.ToggleSwitch({container: "#big", width: 100, height: 60});
    SaVaGe.ToggleSwitch({container: "#small-lever", radius: 15});
</script>

Result

Animation's speed

The duration attribute allows to define the duration of the switch's animation (displayed when changes his state).

Code

<div id="big"></div>
<div id="small-lever"></div>
<script type="text/javascript">
    SaVaGe.ToggleSwitch({container: "#big", width: 100, height: 60});
    SaVaGe.ToggleSwitch({container: "#small-lever", radius: 15});
</script>

Result

Colors

The colors attribute allows to change the colors of the switch, in his both states ('on' and 'off').

Code

<div id="colored1"></div>
<div id="colored2"></div>
<script type="text/javascript">
    SaVaGe.ToggleSwitch({container: "#colored1", colors: {backLeft:'#fbb', foreLeft:'#b00', backRight:'lightgreen', foreRight:'green'}});
    SaVaGe.ToggleSwitch({container: "#colored2", colors: {backLeft:'#bbf', foreLeft:'white', backRight:'#00f', foreRight:'darkblue'}});
</script>

Result

Return value and listener

The onChange attribute allows to add a listener's function which is going to be invoked every time that the switch is clicked. This function receives as parameters the same value that is returned by the ToggleSwitch() method: an object with the methods setValue(), getValue() and remove().

Code

<div id="listener"></div>
<script type="text/javascript">
    SaVaGe.ToggleSwitch({container: "#listener", onChange: function(toggler) { alert("The switch was clicked\nHis new value is: " + toggler.getValue()); }});
</script>

Result