Skip to content

Commit 5c62d28

Browse files
jamiebicknelljamiebicknell
committed
Converted to jQuery Plugin
Converted to full jQuery plugin based on suggestion by @steve228uk
1 parent 081d8b9 commit 5c62d28

6 files changed

+104
-70
lines changed

‎README.md

+42-10
Original file line numberDiff line numberDiff line change
@@ -16,27 +16,59 @@ It utilises a semi transparent PNG overlay to mask the underneath switch image,
1616

1717
## Example Usage
1818

19-
<link href='./toggle-switch.css' rel='stylesheet' type='text/css' />
19+
Plugin will automatically generate HTML required, and gracefully fall back to a plain old checkbox if JavaScript is disabled. Downside is that there may be a slight flicker between seeing the checkbox and the toggle switch appearing.
20+
21+
<link href='./toggleswitch.css' rel='stylesheet' type='text/css' />
2022
<!--[if lt IE 8]>
21-
<link href='./toggle-switch.ie.css' rel='stylesheet' type='text/css' />
23+
<link href='./toggleswitch.ie.css' rel='stylesheet' type='text/css' />
2224
<![endif]-->
2325

2426
<!-- Switch is ON -->
25-
<label for='opt1' class='switch-label'>Option 1</label>
27+
<label for='opt1'>Option 1</label>
28+
<input type='checkbox' name='opt1' id='opt1' value='1' class='toggleswitch' checked='checked' />
29+
30+
<!-- Switch is OFF -->
31+
<label for='opt2'>Option 2</label>
32+
<input type='checkbox' name='opt2' id='opt2' value='1' class='toggleswitch' />
33+
34+
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'></script>
35+
<script type='text/javascript' src='./jquery.toggleswitch.js'></script>
36+
<script type='text/javascript'>
37+
jQuery(document).ready(function($) {
38+
$('.toggleswitch').toggleSwitch();
39+
});
40+
</script>
41+
42+
## Alternative HTML Usage
43+
44+
No flicker between the document loading and toggle switch appearing, but there is no graceful fall back if JavaScript is disabled.
45+
46+
<link href='./toggleswitch.css' rel='stylesheet' type='text/css' />
47+
<!--[if lt IE 8]>
48+
<link href='./toggleswitch.ie.css' rel='stylesheet' type='text/css' />
49+
<![endif]-->
50+
51+
<!-- Switch is ON -->
52+
<label for='opt1'>Option 1</label>
2653
<div class='switch'>
2754
<div class='overlay'></div>
2855
<span class='switched'></span>
29-
<input type='checkbox' name='opt1' id='opt1' value='1' checked='checked' />
56+
<input type='checkbox' name='opt1' id='opt1' value='1' class='toggleswitch' checked='checked' />
3057
</div>
31-
58+
3259
<!-- Switch is OFF -->
33-
<label for='opt2' class='switch-label'>Option 2</label>
60+
<label for='opt2'>Option 2</label>
3461
<div class='switch'>
3562
<div class='overlay'></div>
3663
<span class='switched off'></span>
37-
<input type='checkbox' name='opt2' id='opt2' value='1' />
64+
<input type='checkbox' name='opt2' id='opt2' value='1' class='toggleswitch' />
3865
</div>
39-
40-
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
41-
<script type='text/javascript' src='./toggle-switch.js'></script>
66+
67+
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'></script>
68+
<script type='text/javascript' src='./jquery.toggleswitch.js'></script>
69+
<script type='text/javascript'>
70+
jQuery(document).ready(function($) {
71+
$('.toggleswitch').toggleSwitch();
72+
});
73+
</script>
4274

‎example.html

+25-28
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<title>Toggle Switch - by @jamiebicknell - Github</title>
55
<meta http-equiv='Content-Type' content='text/html;charset=utf-8' />
66
<meta name='viewport' content='initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no' />
7-
<link href='./toggle-switch.css' rel='stylesheet' type='text/css' />
7+
<link href='./toggleswitch.css' rel='stylesheet' type='text/css' />
88
<!--[if lt IE 8]>
9-
<link href='./toggle-switch.ie.css' rel='stylesheet' type='text/css' />
9+
<link href='./toggleswitch.ie.css' rel='stylesheet' type='text/css' />
1010
<![endif]-->
1111
<style type='text/css'>
1212
body {
@@ -22,7 +22,7 @@
2222
margin:0 0 6px 0;
2323
height:16px;
2424
}
25-
.wrapper .row label.switch-label {
25+
.wrapper .row label {
2626
float:left;
2727
width:100px;
2828
}
@@ -35,49 +35,46 @@
3535

3636
<div class='wrapper'>
3737
<div class='row'>
38-
<label for='opt1' class='switch-label'>Option 1</label>
39-
<div class='switch'>
40-
<div class='overlay'></div>
41-
<span class='switched'></span>
42-
<input type='checkbox' name='opt1' id='opt1' value='1' checked='checked' />
43-
</div>
38+
<label for='opt1'>Option 1</label>
39+
<input type='checkbox' name='opt1' id='opt1' value='1' class='toggleswitch' checked='checked' />
4440
</div>
4541
<div class='row'>
46-
<label for='opt2' class='switch-label'>Option 2</label>
47-
<div class='switch'>
48-
<div class='overlay'></div>
49-
<span class='switched off'></span>
50-
<input type='checkbox' name='opt2' id='opt2' value='1' />
51-
</div>
42+
<label for='opt2'>Option 2</label>
43+
<input type='checkbox' name='opt2' id='opt2' value='1' class='toggleswitch' />
5244
</div>
5345
<div class='row'>
54-
<label for='opt3' class='switch-label'>Option 3</label>
55-
<div class='switch'>
56-
<div class='overlay'></div>
57-
<span class='switched off'></span>
58-
<input type='checkbox' name='opt3' id='opt3' value='1' />
59-
</div>
46+
<label for='opt3'>Option 3</label>
47+
<input type='checkbox' name='opt3' id='opt3' value='1' class='toggleswitch' />
6048
</div>
6149
<div class='row'>
62-
<label for='opt4' class='switch-label'>Option 4</label>
50+
<label for='opt4'>Option 4</label>
51+
<input type='checkbox' name='opt4' id='opt4' value='1' class='toggleswitch' checked='checked' />
52+
</div>
53+
<div class='row'>
54+
<label for='opt5'>Option 5</label>
6355
<div class='switch'>
6456
<div class='overlay'></div>
6557
<span class='switched'></span>
66-
<input type='checkbox' name='opt4' id='opt4' value='1' checked='checked' />
58+
<input type='checkbox' name='opt5' id='opt5' value='1' class='toggleswitch' checked='checked' />
6759
</div>
6860
</div>
6961
<div class='row'>
70-
<label for='opt5' class='switch-label'>Option 5</label>
62+
<label for='opt6'>Option 6</label>
7163
<div class='switch'>
7264
<div class='overlay'></div>
73-
<span class='switched'></span>
74-
<input type='checkbox' name='opt5' id='opt5' value='1' checked='checked' />
65+
<span class='switched off'></span>
66+
<input type='checkbox' name='opt6' id='opt6' value='1' class='toggleswitch' />
7567
</div>
7668
</div>
7769
</div>
7870

79-
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
80-
<script type='text/javascript' src='./toggle-switch.js'></script>
71+
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'></script>
72+
<script type='text/javascript' src='./jquery.toggleswitch.js'></script>
73+
<script type='text/javascript'>
74+
jQuery(document).ready(function($) {
75+
$('.toggleswitch').toggleSwitch();
76+
});
77+
</script>
8178

8279
</body>
8380
</html>

‎jquery.toggleswitch.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/*
2+
Title: Toggle Switch
3+
Author: @jamiebicknell
4+
URL: http://github.com/jamiebicknell/Toggle-Switch
5+
Thanks: @steve228uk for prop/var mods and plugin suggestion
6+
*/
7+
8+
(function ($) {
9+
$.fn.toggleSwitch = function () {
10+
$(this).each(function (i) {
11+
var obj = $(this), status = obj.is(':checked') ? '' : ' off';
12+
if(!obj.parent('div.switch').length) {
13+
obj.wrap('<div class="switch"></div>');
14+
obj.parent('div.switch').prepend('<span class="switched' + status + '" />').prepend('<div class="overlay" />');
15+
}
16+
obj.parent('div.switch').add($('label[for=' + obj.prop('id') + ']')).click(function (e) {
17+
e.preventDefault();
18+
var value, check;
19+
if ($(this).is('label')) {
20+
value = $('#' + $(this).prop('for')).prev('span.switched');
21+
check = $('#' + $(this).prop('for'));
22+
} else {
23+
value = $(this).children('span.switched');
24+
check = $(this).children('input[type=checkbox]');
25+
}
26+
if (value.is('.off')) {
27+
value.stop().animate({left: 0}, 150).removeClass('off');
28+
check.prop('checked', 'checked');
29+
} else {
30+
value.stop().animate({left: -21}, 150).addClass('off');
31+
check.prop('checked', '');
32+
}
33+
});
34+
35+
});
36+
};
37+
}(jQuery));

‎toggle-switch.js

-32
This file was deleted.

‎toggle-switch.css renamed to ‎toggleswitch.css

File renamed without changes.

‎toggle-switch.ie.css renamed to ‎toggleswitch.ie.css

File renamed without changes.

0 commit comments

Comments
 (0)