Getting Started

jqxButton

The jqxButton represents a jQuery button widget that allows you to display a button on the Web page.
Every UI widget from jQWidgets toolkit needs its JavaScript files to be included in order to work properly.

The first step is to create html page and add links to the javascript files and css dependencies to your project. The jqxButton widget requires the following files: 

<head>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css"/>
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>

The next step is to create an input element within the body of the html document. 
<input type="button" value="Button" id='jqxbutton' />

The last step is to initialize the widget by adding the following script to the html document: 
$("#jqxbutton").jqxButton({ width: '150', height: '25'});

To set a property(option), you need to pass the property name and value(s) in the jqxButton's constructor. 
$("#jqxbutton").jqxButton({ disabled: true });
To get a property(option), you need to pass the property name to the jqxButton's constructor. 
var disabled = $("#jqxbutton").jqxButton('disabled');
To bind to an event of a UI widget, you can use basic jQuery syntax. Let’s suppose that you want to get when the user clicks the button. The example code below demonstrates how to bind to the ‘click’ event of jqxButton. 
$('#jqxButton').on('click', function (event) {
    alert('Button is Clicked');
});

Basic Push Button Sample

<!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery Button Sample1</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta name="keywords" content="jQuery, Button, Toggle Button, Repeat Button, Link Button, Help Documentation" /> 
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create Push Button.
                $("#jqxButton").jqxButton({ width: '150', height: '25'});
                // Create Submit Button.
                $("#jqxSubmitButton").jqxButton({ width: '150', height: '25'});
                // Create Disabled Button
                $("#jqxDisabledButton").jqxButton({ disabled: true, width: '150', height: '25'});
                // Subscribe to Click events.
                $("#jqxButton").on('click', function () {
                    alert('Button Clicked');
                });
                $("#jqxSubmitButton").on('click', function () {
                    alert('Submit Button Clicked');
                });
            });
        </script>
        <div style='width: 150px;' id='jqxWidget'>
            <div>
                <input type="button" value="Button" id='jqxButton' />
            </div>
            <div>
                <input style='margin-top: 20px;' type="submit" value="Submit" id='jqxSubmitButton' />
            </div>
            <div>
                <input style='margin-top: 20px;' type="button" value="Disabled" id='jqxDisabledButton' />
            </div>
        </div>
    </div>
</body>
</html>

The result of the above code is:

jqxRepeatButton

The jqxRepeatButton represents a button widget derived from the jqxButton. However, jqxRepeatButton give you control over when and how the 'click' event occurs. The jqxRepeatButton raises the 'click' event repeatedly from the time it is pressed until it is released. The interval between two 'click' events is specified by the 'delay' property(option).

Basic Repeat Button Sample

<!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery Repeat Button Sample1</title>
    <meta name="keywords" content="jQuery, Button, Toggle Button, Repeat Button, Link Button, Help Documentation" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create Repeat Button.
                $("#jqxButton").jqxRepeatButton({ width: '150', height: '25' });
                // Set its delay(the interval between two clicks) property.
                $("#jqxButton").jqxRepeatButton({ delay: 25 });
                var i = 0;
                // Subscribe to Click events.
                $("#jqxButton").on('click', function () {
                    $("#log").html("Clicks: " + i);
                    i++;
                });
            });
        </script>
        <div style='width: 150px;' id='jqxWidget'>
            <div>
                <input type="button" value="Click me!" id='jqxButton' />
            </div>
            <div id='log'>
            </div>
        </div>
    </div>
</body>
</html>

The result of the above code is:

jqxLinkButton

The jqxLinkButton widget represents a button created from anchor element.

Basic Link Button Sample

<!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery Link Button Sample1</title>
    <meta name="keywords" content="jQuery, Button, Toggle Button, Repeat Button, Link Button, Help Documentation" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create Link Button.
                $("#jqxButton").jqxLinkButton({ width: '150', height: '25' });
            });
        </script>
         <a style='margin-left: 25px;' target="_blank" href="http://www.jqwidgets.com" id='jqxButton'>Link Button</a>      
    </div>
</body>
</html>

The result of the above code is:

jqxToggleButton

The jqxToggleButton represents a button widget that switches its checked state after a click.

Basic Toggle Button Sample

<!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery Toggle Button Sample1</title>
    <meta name="keywords" content="jQuery, Button, Toggle Button, Repeat Button, Link Button, Help Documentation" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create Toggle Button.
                $("#jqxButton").jqxToggleButton({ width: '150', height: '25', toggled: true });
          
                // Handle toggled state Behavior.
                $("#jqxButton").on('click', function () {
                    var toggled = $("#jqxButton").jqxToggleButton('toggled');
                    if (toggled) {
                        $("#jqxButton")[0].value = 'Toggled On';
                    }
                    else $("#jqxButton")[0].value = 'Toggled Off';
                });
            });
        </script>
        <div style='width: 150px;' id='jqxWidget'>
            <div>
                <input type="button" value="Toggled On" id='jqxButton' />
            </div>
        </div>
    </div>
</body>
</html>

The result of the above code is:

jqxSwitchButton

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.

Basic Switch Button Sample

<!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery Switch Button Sample</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.11.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: '30', checked: true });
            $("#jqxVerticalButton").jqxSwitchButton({ orientation: 'vertical', theme: 'classic', width: '30', height: '100', checked: true });
            // bind to the 'change' event. The event occurs when the Switch Button's state is changed.
            $("#jqxButton").on('change', function (event) {
                var checked = event.args.check;
                $("#eventlog1").html("Checked: " + checked);
            });
            $("#jqxVerticalButton").on('change', function (event) {
                var checked = event.args.check;
                $("#eventlog2").html("Checked: " + checked);
            });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <h4>
        Horizontal Switch Button</h4>
    <div id='jqxButton'>
    </div>
    <br />
    <br />
    <div id='eventlog1'>
    </div>
    <h4>
        Vertical Switch Button</h4>
    <div id='jqxVerticalButton'>
    </div>
    <br />
    <br />
    <div id='eventlog2'>
    </div>
</body>
</html>

The result of the above code is:

jqxButtonGroup

The jqxButtonGroup widget creates a set of buttons that can work as normal buttons, radio buttons or checkboxes.

Basic Sample

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>The jqxButtonGroup widget creates a set of buttons that can work as normal buttons, radio buttons or checkboxes.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttongroup.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create jqxButton widgets.
                $("#jqxWidget").jqxButtonGroup({ mode: 'default' });
                $("#defaultMode").jqxRadioButton({ checked: true });
                $("#radioMode").jqxRadioButton();
                $("#checkboxMode").jqxRadioButton();
                $("#checkboxMode").on('checked', function () {
                    $("#jqxWidget").jqxButtonGroup({ mode: 'checkbox' });
                });
                $("#defailtMode").on('checked', function () {
                    $("#jqxWidget").jqxButtonGroup({ mode: 'default' });
                });
                $("#radioMode").on('checked', function () {
                    $("#jqxWidget").jqxButtonGroup({ mode: 'radio' });
                });
                $("#jqxWidget").on('buttonclick', function (event) {
                    var clickedButton = event.args.button;
                    $("#eventsLog").html("Clicked: " + clickedButton[0].id);
                });
            });
        </script>
        <div id='jqxWidget'>
            <button style="padding:4px 16px;" id="Left">
                Left</button>
            <button style="padding:4px 16px;" id="Center">
                Center</button>
            <button style="padding:4px 16px;" id="Right">
                Right</button>
        </div>
        <div style="margin-top: 10px;">
            <h4>
                Modes</h4>
            <div style="margin: 3px;" id="defaultMode">
                Default</div>
            <div style="margin: 3px;" id="radioMode">
                RadioButtons</div>
            <div style="margin: 3px;" id="checkboxMode">
                CheckBoxes</div>
        </div>
        <div id="eventsLog" style="margin-top: 10px;">
        </div>
    </div>
</body>
</html>

The result of the above code is: