Create On Off swith button using Jquery
Have you created ON-OFF switch button in Jquery? Using Jquery i created an amazing ON-OFF Switch button. It is very useful UI control at on off kind scenario. for example to disable some elements, At the place of remove or adding things in HTML and so on.
Now a days Jquery is on of the best technical one at development. using this we can do magical things. Here i created a ON-OFF switch button. It is very use full control at the place of disable some thing or adding and removing Elements in the Html page.
Let us see how to do that.
Frist take a div tag and take three span tags inside of it. It should be like this below code
<div class="OnOff Off" title="Click here to ON">
<span class="on">ON</span>
<span></span>
<span class="off">OFF</span>
</div>
Then we have to show hide span tags in each click event of div tag. That code is
$(document).ready(function()
{
$('.OnOff').click(function () {
if ($(this).hasClass('On')) {
$('.on', this).hide();
$('.off', this).show();
$(this).addClass('Off').removeClass('On').attr('title','Click here to OFF');
}
else {
$('.off', this).hide();
$('.on', this).show();
$(this).addClass('On').removeClass('Off').attr('title','Click here to ON');
}
});
});
every thing is fine from code but from UI it shouldn't be like a switch button so we need to apply some CSS classes Those are
.OnOff
{
width:54px;
height:24px;
overflow:hidden;
font-size:10px
}
.OnOff span
{
position:relative;
display:block;
height:18px;
float:left;
width:15px;
border:1px solid silver;
cursor:pointer;
}
.OnOff .on
{
width:25px;
border:1px solid #1399EE;
background-color:#57A4D9;
line-height:18px;
text-align:center;
vertical-align:middle;
color:#ffffff;
}
.OnOff .off
{
width:25px;
border:1px solid #C0C0C0;
background-color:#E3E3E3;
line-height:18px;
text-align:center;
vertical-align:middle;
}
.OnOff.On .on
{
border-radius: 3px 0px 0px 3px;
border-left:1px solid #1399EE;
}
.OnOff.On span
{
border-left:none;
border-radius: 0px 3px 3px 0px;
}
.OnOff.On .off
{
display:none;
}
.OnOff.Off .off
{
border-radius: 0px 3px 3px 0px;
border-right:1px solid #C0C0C0;
}
.OnOff.Off span
{
border-right:none;
border-radius: 3px 0px 0px 3px;
}
.OnOff.Off .on
{
display:none;
}
Please refer this below link, I added code in Jsfiddel.net
http://jsfiddle.net/shivakumar/uPpCg/2/