Description:
In previous posts I explained jQuery Google Currency Converter API Example, jQuery Highlight gridview rows on mouseover, jQuery Change style of controls, Show multiple months in datepicker, and many articles relating to JQuery and modal popup. Now I will explain how to implement fancy switch on and off using jQuery in asp.net.
In previous posts I explained jQuery Google Currency Converter API Example, jQuery Highlight gridview rows on mouseover, jQuery Change style of controls, Show multiple months in datepicker, and many articles relating to JQuery and modal popup. Now I will explain how to implement fancy switch on and off using jQuery in asp.net.
To
implement this functionality we need to write the code like as shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery UI Switch ON OFF</title>
<script src="http://code.jquery.com/jquery-1.8.2.js"
type="text/javascript"></script>
<style type="text/css">
#container{background:#ebebeb;}
.switch{
border:none;
background:left no-repeat;
width:105px;
height:46px;
padding:0;
margin:0;
}
.on, .off{
width:50px;
height:40px;
display:inline-block;
cursor:pointer;
}
.result{display:none; margin-top:5px; font-size:14px; color:#333;}
.result span{color:#C03; font-weight:700;}
</style>
<script type="text/javascript">
$(document).ready(function()
{
$('.switch').css('background', 'url("http://papermashup.com/demos/jquery-switch/switch.png")');
$('.on_off').css('display', 'none');
$('.on, .off').css('text-indent', '-10000px');
$("input[name=on_off]").change(function() {
var button = $(this).val();
if (button == 'off') {
$('.switch').css('background-position', 'right');
}
if (button == 'on') {
$('.switch').css('background-position', 'left');
}
$('.result span').html(button);
$('.result').fadeIn();
});
});
</script>
</head>
<body>
<form id="form1"
runat="server">
<fieldset class="switch">
<label class="off">Off<input type="radio" class="on_off" name="on_off" value="off"/></label>
<label class="on">On<input type="radio" class="on_off" name="on_off" value="on"/></label>
</fieldset>
<input type="submit" value="Submit"/>
<div class="result">The switch is: <span>on</span></div>
</form>
</body>
</html>
|
By using above code we can implement switch on and off.
If you want to know more about above code check original site jQuery fancy switch.
Live
Demo
To
check live demo click on below on and off switches
The switch is: on
|
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
|
|
10 comments :
Looks great .. Great work buddy ..
very nice
Awesome Trick...
wonderfulll sir...
Very good sir...........
Hi,
I think it isn't working in ie8.
Regards,
Srinivas.
@srinu...
it's working in all the browsers...........
Its only show 'ON' i.e The switch is: on when we click on 'OFF' It not Showing 'OFF' i.e The switch is: on
i updated the code check it once demo is working fine now.
Fantastic