iOS 7 style switches for checkboxes example using switchery JS
In this post we will give you information about iOS 7 style switches for checkboxes example using switchery JS. Hear we will give you detail about iOS 7 style switches for checkboxes example using switchery JSAnd how to use it also give you demo for it if it is necessary.
Switchery is a simple component that help us to make beautiful iOS 7 style switches for our checkbox. In this post we will see how to make ios 7 style switches animation using js plugin. If we make using our custom css then it take long time to integrate.
For this example i use CDN of Switchery Plugin so we can simply use CDN without download on local, so we can use bellow path of CDN:
CDN:
https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.css
https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.js
Now we will see full example of Switchery JS Plugin for ios 7 type animation checkboxe, you can also check demo for your testing. So let’s follow bellow example:
Example:
<!DOCTYPE html>
<html>
<head>
<title>ISOtype switching animation example using switchery JS</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.js
" type="text/javascript"></script>
</head>
<body>
<input type="checkbox" checked />
<script type="text/javascript">
var elem = document.querySelector('.js-switch');
var init = new Switchery(elem);
</script>
</body>
</html>
I hope it can help you…
Hope this code and post will helped you for implement iOS 7 style switches for checkboxes example using switchery JS. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs