Category >
ASP.NET
|| Published on :
Monday, June 29, 2015 || Views:
5112
||
iPhone toggle button using jQuery using aspnet
In this tutorial, we are using Toggles feature of jQuery that makes easy to create toogle buttons with sliding effect for the web application project so let starts the coding.
Step 1: Create a asp.net webpage(Default3.aspx) with the following codes.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!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>
Happy coding!!!!