Toggle Switch jQuery Mobile - IOS 8 Checkbox Example
iPhone Toggle Button using jQuery
Toggle is a jQuery plugin that makes easy to create toggle buttons with smooth sliding effect for the web application project. Latest IOS 9 updates and introduced new toggle button, radio button styles, checkbox styles. In this blog post I will demonstrate flip toggle switch jquery. Find the below jQuery with CSS example :-
 |
| jquery mobile toggle switch get value |
Default.aspx
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iOS 8 Check Box Button using CSS</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('.switch').click(function () {
$(this).toggleClass("switchOn");
});
$('.switchBig').click(function () {
$(this).toggleClass("switchBigOn");
});
});
</script>
<style>
body {
font-family: arial;
}
.switch {
width: 62px;
height: 32px;
background: #e5e5e5;
z-index: 0;
margin: 0;
padding: 0;
appearance: none;
border: none;
cursor: pointer;
position: relative;
border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
}
.switch:before {
content: ' ';
position: absolute;
left: 1px;
top: 1px;
width: 60px;
height: 30px;
background: #fff;
z-index: 1;
border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
}
.switch:after {
content: ' ';
height: 29px;
width: 29px;
border-radius: 28px;
background: #fff;
position: absolute;
z-index: 2;
top: 1px;
left: 1px;
-webkit-transition-duration: 300ms;
transition-duration: 300ms;
-webkit-box-shadow: 0 2px 5px #999999;
box-shadow: 0 2px 5px #999999;
}
.switchOn, .switchOn:before {
background: #4cd964 !important;
}
.switchOn:after {
left: 32px !important;
}
.switchBig {
width: 200px;
height: 105px;
background: #e5e5e5;
z-index: 0;
margin: 0;
padding: 0;
appearance: none;
border: none;
cursor: pointer;
position: relative;
border-radius: 53px;
-moz-border-radius: 53px;
-webkit-border-radius: 53px;
}
.switchBig:before {
content: ' ';
position: absolute;
left: 2px;
top: 2px;
width: 196px;
height: 101px;
background: #fff;
z-index: 1;
border-radius: 52px;
-moz-border-radius: 52px;
-webkit-border-radius: 52px;
}
.switchBig:after {
content: ' ';
height: 100px;
width: 100px;
border-radius: 52px;
background: #fff;
position: absolute;
z-index: 2;
top: 2px;
left: 2px;
-webkit-transition-duration: 300ms;
transition-duration: 300ms;
-webkit-box-shadow: 0 2px 5px #999999;
box-shadow: 0 2px 5px #999999;
}
.switchBigOn, .switchBigOn:before {
background: #4cd964 !important;
}
.switchBigOn:after {
left: 98px !important;
}
</style>
</head>
<body>
<div style="margin:0 auto;width:auto">
<h1>CSS Toggle Button Style</h1>
<b>Small Switch</b><br />
<label>
<input type="checkbox" name="checkboxName" class="checkbox" />
<div class="switch"></div>
</label>
<br /><br />
<b>Big Switch</b><br />
<label>
<input type="checkbox" name="checkboxName" class="checkbox" /> <br /><br />
<div class="switchBig"></div>
</label>
</div>
</body>
</html>
Toggle Switch jQuery Mobile - IOS 8 Checkbox Example
Reviewed by Ravi Kumar
on
1:09 AM
Rating:
Reviewed by Ravi Kumar
on
1:09 AM
Rating:
No comments: