sSwitch – JQuery Toggle Button Plugin For Sliding Toggle Switches
jQuery Toggle buttons are usually used where the user can choose only Yes/No option such as gender option (Male/Female). Now a days lots of controls have been using to provide best user interface. Nice looking and easy too use jQuery Toggle Button Plugin increase user interaction in web page.
Introducing a new jQuery switch plugin, it helps you to turn your default HTML checkbox inputs into beautiful switches in few simple simple steps.
JQuery Toggle Button Plugin
Sswitch Supports all modern browsers such as Chrome, Firefox, Opera, Safari, IE8+. You can easily integrate Sswitch plugin in web page. It only requires knowledge of HTML and JavaScript.
index.php
js
--jquery.min.js
--Sswitch.js
css
--style.css
Include the jQuery and sSwitch plugin JavaScript and CSS into the <head> tag of page. Download JQuery library in js folder. You need to have basic skill of JQuery framework and JavaScript Scripting language.
Now, Download Sswitch JavaScript and CSS stylesheet into js and css folder accordingly.
|
1
2
|
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Sswitch.js"></script>
|
Add checkbox in HTML document having class name “checkbox”. Class checkboxName is used for initializing the sSwitch plugin in later part.
|
1
|
<input class="checkbox" name="checkboxName" type="checkbox" />
|
Initialization plugin in document’s onReady() event. The onSwitchChange method executes when user changes state of switch. You can do your magic in this part.
|
1
2
3
4
5
6
7
8
9
|
<script>
$(document).ready(function(){
$(".checkbox").Sswitch({
onSwitchChange: function() {
// Your magic here
}
});
});
</script>
|
index.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<html>
<head>
<title>Sswitch Demo</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<input type="checkbox" name="checkboxName" class="checkbox" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Sswitch.js"></script>
<script>
$(document).ready(function(){
$(".checkbox").Sswitch({
onSwitchChange: function() {
// Your magic
}
});
});
</script>
</body>
</html>
|
Two major part of plugin is to render HTML element and initialize plugin using class name. I will share other tutorials of JQuery Plugin soon.
Read More:
How To Create Simple JQuery Plugin
Best Syntax Highlighter Plugins Of WordPress
How To Create Twitter Bot Using Tweepy In Python
