How To Make Fancy Switch ON and OFF Effects Example Using jQuery in c# Asp.Net
Program:
.Aspx File:
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>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> |
Live Demo:
|
|
No comments:
Post a Comment