jQuery Toggle Button

This post illustrates how to add a toggle button to a web page in a few simple steps. Use the toggle button to allow the user to select a true or false state.
1. Include the javascript and stylesheet files:

<link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="styles/jqx.darkblue.css" type="text/css" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jqxcore.js"></script>
<script type="text/javascript" src="jqxbuttons.js"></script>

The Toggle Button is implemented in the jqxbuttons.js. We will set the ‘darkblue’ theme to the button and we need to include jqx.darkblue.css style.
2. Add an input element with id=’jqxButton’.

<input type="button" value="Toggled Button" id='jqxButton' />

3. Select the input element and call the jqxToggleButton constructor.

$("#jqxButton").jqxToggleButton({ width: '200', height: '30', toggled: true, theme: 'darkblue' });

The toggled property specifies the state of the button. When the toggle button is clicked, the toggled property value is switched to true or false.

About admin

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

2 Responses to jQuery Toggle Button

  1. alearg says:

    Is it possible to disable a ToggleButton that was created from a div tag?

Leave a Reply