Adding a Switch Button to a Web Page

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" "">
<html xmlns="">
<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 });
<body class='default'>
<div id='jqxButton'></div>
Here’s the result of the above code: ipad-button

About admin

This entry was posted in JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxButton and tagged , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply