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:

The next step is to create an input element within the body of the html document.
The last step is to initialize the widget by adding the following script to the html document:
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

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

The result of the above code is:

[フレーム]

jqxLinkButton

The jqxLinkButton widget represents a button created from anchor element.

Basic Link Button Sample

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

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

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

The result of the above code is:

[フレーム]