The jqxSwitchButton represents a button widget that switches its checked state after a click. It is very similar to the jqxToggleButton, but it has different UI look. In order to create a Switch Button, you need to add a DIV tag to your web page. Then, select the DIV tag with a simple jQuery selection and call the jqxSwitchButton constructor.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>jQuery Switch Button</title> <meta name="keywords" content="jQuery, Switch Button, JavaScript Switch Button" /> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxswitchbutton.js"></script> <script type="text/javascript"> $(document).ready(function () { // Create Switch Button. $("#jqxButton").jqxSwitchButton({ theme: 'classic', width: '100', height: '25', checked: true }); }); </script></head><body class='default'> <div id='jqxButton'></div></body></html>
Here’s the result of the above code:
