Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
js
 
 
 
 
 
 

README.md

jquery-on-off-switch

JQuery based on-off switch for websites

##Usage

###1. Include code in

  <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="js/on-off-switch.js"></script>
    <script type="text/javascript" src="js/on-off-switch-onload.js"></script>
    <link rel="stylesheet" type="text/css" href="css/on-off-switch.css"/>

###2a Create Switch manually

<div class="checkbox-container">
    <input type="checkbox" id="on-off-switch" name="switch1" checked>
</div>
<div id="listener-text">

</div>
<script type="text/javascript">
    new DG.OnOffSwitch({
        el: '#on-off-switch',
        textOn: 'Sync On',
        textOff: 'Off',
        listener:function(name, checked){
            $("#listener-text").html("Listener called for " + name + ", checked: " + checked);
        }
    });
</script>

2a Auto create switchces

This done by including the on-off-switch-onload.js file in the .

Then assign the checkboxes to the css class custom-switch.

    <input type="checkbox" class="custom-switch" name="checkbox1" id="checkbox1">

###Methods

The following public methods are available: toggle: Toggles the checked state of the switch. check: Set the switch to checked. uncheck: Set the switch to unchecked. getValue: Returns true when checked, false otherwise.

###Access automatically created checkboxes. The automatically created switches can be accessed using the

DG.switches

object.

Example

DG.switches("#checkbox1").check();

or by name

DG.switches("checkbox1").uncheck();

Ie. using the hash(#) prefix for ids.

About

JQuery based on-off switch for websites

Resources

Releases

No releases published
You can’t perform that action at this time.