Custom On Off Toggle Switch Plugin For jQuery on off switch js - Download Custom On/Off Toggle Switch Plugin For jQuery - on-off-switch.js

Download Custom On/Off Toggle Switch Plugin For jQuery – on-off-switch.js

By Posted on

This time I will share jQuery Plugin and tutorial about Custom On/Off Toggle Switch Plugin For jQuery – on-off-switch.js, hope it will help you in programming stack.

Custom On Off Toggle Switch Plugin For jQuery on off switch js - Download Custom On/Off Toggle Switch Plugin For jQuery - on-off-switch.js
File Size: 39.9 KB
Views Total: 39425
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

on-off-switch.js is a simple to use jQuery plugin used for generating toggle switches with custom text, colors and sizes form ‘hidden’ or checkbox inputs.

How to use it:

1. Load jQuery JavaScript library and the jQuery on-off-switch.js plugin’s files into the webpage.

view source
1 <script src="//code.jquery.com/jquery-1.12.2.min.js"></script>
2 <script src="on-off-switch.js"></script>
3 <script src="on-off-switch-onload.js"></script>
4 <link rel="stylesheet" href="css/on-off-switch.css">

2. Create a basic on / off toggle switch from <input type="checkbox">.

view source
1 <input type="checkbox" id="on-off-switch" name="switch1" checked>
view source
1 new DG.OnOffSwitch({
2     el: '#on-off-switch',
3     textOn: 'On',
4     textOff: 'Off',
5 });

3. Create a toggle switch without text and by using <input type="hidden"> instead of <input type="checkbox">. Value=”1″ for checked, 0 for unchecked.

view source
1 <input type="hidden" id="on-off-switch-notext" value="0">
view source
1 new DG.OnOffSwitch({
2     el: '#on-off-switch-notext'
3 });

4. Create a toggle switch with custom color and size

view source
1 <input type="hidden" id="on-off-switch-custom" value="1">
view source
01 new DG.OnOffSwitch({
02     el: '#on-off-switch-custom',
03     height: 150,
04     trackColorOn:'#F57C00',
05     trackColorOff:'#666',
06     trackBorderColor:'#555',
07     textColorOff:'#fff',
08     textOn:'YES',
09     textOff:'NO'
10 });

5. Listen to native checkbox updates.

view source
1 <input type="checkbox" name="on-off-switch-demo" class="custom-switch" id="on-off-switch-demo">
2 <a href="#" onclick="$('#on-off-switch-demo').click();return false">Execute $('#on-off-switchdemo').click()</a>
view source
1 new DG.OnOffSwitchAuto({
2     cls:'.custom-switch',
3     textOn:"YES",
4     textOff:"NO",
5     listener:function(name, checked){
6       document.getElementById("ELEMENT").innerHTML = "Switch " + name + " changed value to " + checked;
7     }
8 });

6. All default options.

view source
01 new DG.OnOffSwitchAuto({
02  
03     inputEl: undefined,
04  
05     listener: undefined,
06     trackBorderColor: undefined,
07  
08     checked: false,
09  
10     width: 0,
11     height: 30,
12  
13     trackBorderWidth: 1,
14  
15     textSizeRatio: 0.40,
16  
17     trackColorOn: undefined,
18     trackColorOff: '#EEE',
19  
20     textColorOn: undefined,
21     textColorOff: undefined,
22  
23     el: undefined,
24     track: undefined,
25     thumb: undefined,
26     thumbColor: undefined,
27     onTextEl: undefined,
28     offTextEl: undefined,
29     onOffTrackContainer: undefined,
30  
31     textOn: "",
32     textOff: "",
33  
34     minX: 0,
35     maxX: 0,
36  
37     trackOn: undefined,
38     trackOff: undefined,
39  
40     innerTrackWidth: 0,
41  
42     name: undefined,
43  
44     dragCurrentX: 0,
45     borderSize: 0,
46     isCheckbox:false,
47  
48 });

7. API methods.

  • 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.

Change log:

2016-08-09

  • Fixed issue with scrolling
  • Fixed drag event

This awesome jQuery plugin is developed by DHTMLGoodies. For more Advanced Usages, please check the demo page or visit the official website.

source : jqueryscript.net

Related posts: