jqx

The repository jqx contains the custom elements jqxButton (<jqx-button>), jqxComboBox (<jqx-combo-box>), jqxCheckBox (<jqx-check-box>), jqxDropDownList (<jqx-drop-down-list>), jqxNumericTextBox (<jqx-numeric-text-box>), jqxGauge (<jqx-gauge>), jqxLED (<jqx-led>), jqxListBox (<jqx-list-box>), jqxPowerButton (<jqx-power-button>), jqxProgressBar (<jqx-progress-bar> and <jqx-circular-progress-bar), jqxRadioButton (<jqx-radio-button>), jqxRepeatButton (<jqx-repeat-button>), jqxScrollBar (<jqx-scroll-bar>), jqxSlider (<jqx-slider>), jqxSwitchButton (<jqx-switch-button>), jqxTabs (jqx-tabs), jqxTank (<jqx-tank>), jqxToggleButton (<jqx-toggle-button>).

Table of contents

• jqxButton
• jqxComboBox
• jqxCheckbox
• jqxDropDownList
• jqxGauge
• jqxLED
• jqxListBox
• jqxNumericTextBox
• jqxPowerButton
• jqxProgressBar
• jqxRadioButton
• jqxRepeatButton
• jqxScrollBar
• jqxSlider
• jqxSwitchButton
• jqxTabs
• jqxTank
• jqxToggleButton
• Notes
  • Icons in Firefox

jqxButton

jqxButton is a simple HTML button that offers the functionality to change the value of the element.

Required files

The jqxButton element requires the following file references to be placed on a web page in order for the custom element to be successfully registered and properly working:

• jqxelement.js -- this is the base file that defines the common architecture of all jqx custom elements. It is part of the repository ni-kismet/jqx-element.
• jqxbutton.js -- this file defines the functionality of the jqxButton custom element.

jqxButton also requires the following style sheets in order to be displayed correctly.

• jqx.base.css -- the base style sheet file.

Initialization

To create an instance of a jqxButton custom element, insert the following tag in an HTML page:

<jqx-button></jqx-button>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<jqx-button value="Click Me"></jqx-button>

Getting and setting properties dynamically

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('jqx-button');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let value = customElement.value;

Here is an example showing how to set a property dynamically:

customElement.value = 0;

jqxComboBox

jqxComboBox element represents an input with a dropdown list of items.

Required files

The jqxComboBox element requires the following file references to be placed on a web page in order for the custom element to be successfully registered and properly working:

• jqxelement.js -- this is the base file that defines the common architecture of all jqx custom elements. It is part of the repository ni-kismet/jqx-element.
• jqxbutton.js -- this file defines the functionality of the jqxButton custom element. jqxScrollBar uses repeat buttons.
• jqxscrollbar.js -- this file defines the functionality of the jqxScrollBar custom element.
• jqxlistbox.js -- this file defines the functionality of the jqxListBox custom element used in the jqxComboBox.
• jqxdropdownlist.js -- this file defines the functionality of the jqxDropDownList custom element. The ComboBox element extends jqxDropDownList.
• jqxcombobox.js -- this file defines the functionality of the jqxComboBox custom element.

jqxComboBox also requires the following style sheets in order to be displayed correctly.

• jqx.base.css -- the base style sheet file.

Initialization

To create an instance of a jqxComboBox custom element, insert the following tag in an HTML page:

<jqx-combo-box></jqx-combo-box>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<jqx-combo-box drop-down-open-mode="bottom"></jqx-combo-box>

Getting and setting properties dynamically

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('jqx-combo-box');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let selectedIndexes = customElement.selectedIndexes;

Here is an example showing how to set a property dynamically:

customElement.selectedIndexes = [1,2,3];

Animations

By default the animation for the jqxComboBox is disabled. It can be enabled by adding the CSS class called "animation" to the element, like so:

<jqx-combo-box class="animation"></jqx-combo-box>

jqxCheckbox

jqxCheckbox is a simple HTML checkbox that offers the functionality to change it's check state.

Required files

The jqxCheckbox element requires the following file references to be placed on a web page in order for the custom element to be successfully registered and properly working:

• jqxelement.js -- this is the base file that defines the common architecture of all jqx custom elements. It is part of the repository ni-kismet/jqx-element.
• jqxbutton.js -- this file defines the functionality of the jqxButton custom element. jqxCheckBox inherits jqxButton custom element.
• jqxcheckbox.js -- this file defines the functionality of the jqxCheckbox custom element.

jqxCheckbox also requires the following style sheets in order to be displayed correctly.

• jqx.base.css -- the base style sheet file.

Initialization

To create an instance of a jqxCheckbox custom element, insert the following tag in an HTML page:

<jqx-checkbox></jqx-checkbox>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<jqx-checkbox checked name="checkbox1" disabled right-to-left ></jqx-checkbox>

Getting and setting properties dynamically

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('jqx-checkbox');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let checked = customElement.checked;

Here is an example showing how to set a property dynamically:

customElement.checked = true;

jqxDropDownList

jqxDropDownList represents a selection field that acts as a button and when clicked it opens/closes a list of selectable items.

Required files

The jqxDropDownList element requires the following file references to be placed on a web page in order for the custom element to be successfully registered and properly working:

• jqxelement.js -- this is the base file that defines the common architecture of all jqx custom elements. It is part of the repository ni-kismet/jqx-element.
• jqxbutton.js -- this file defines the functionality of the jqxButton custom element. jqxScrollBar uses repeat buttons.
• jqxscrollbar.js -- this file defines the functionality of the jqxScrollBar custom element.
• jqxlistbox.js -- this file defines the functionality of the jqxListBox custom element used in the jqxDropDownList.
• jqxdropdownlist.js -- this file defines the functionality of the jqxDropDownList custom element.

jqxDropDownList also requires the following style sheets in order to be displayed correctly.

• jqx.base.css -- the base style sheet file.

Initialization

To create an instance of a jqxDropDownList custom element, insert the following tag in an HTML page:

<jqx-drop-down-list></jqx-drop-down-list>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<jqx-drop-down-list drop-down-open-mode="bottom"></jqx-drop-down-list>

Getting and setting properties dynamically

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('jqx-drop-down-list');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let selectedIndexes = customElement.selectedIndexes;

Here is an example showing how to set a property dynamically:

customElement.selectedIndexes = [1,2,3];

Animations

By default the animation for the jqxDropDownList is disabled. It can be enabled by adding the CSS class called "animation" to the element, like so:

<jqx-drop-down-list class="animation"></jqx-drop-down-list>

jqxGauge

jqxGauge is a circular (or semi-circular) numeric control used to display or select a value from a range.

Required files

jqxGauge requires the following scripts to be referenced on a page in order for the custom element to be successfully registered and to work correctly:

• jqxelement.js -- this is the base file that defines the common architecture of all jqx custom elements. It is part of the repository ni-kismet/jqx-element.
• jqxtank.js -- this file defines the functionality of the jqxTank custom element which jqxGauge extends.
• jqxgauge.js -- this file defines the unique functionality of the jqxGauge custom element.
• jqxdraw.js -- this file contains SVG rendering functionality used in jqxGauge.
• jqxnumberrenderer.js -- this file contains several functions used for rendering the value of the jqxGauge custom element.
• jqxnumericprocessor.js -- this file contains functions used for the processing of numeric objects.
• jqxmath.js -- this file contains many of the mathematical functions used by the jqxGauge custom element.
• jqxtickintervalhandler.js -- this file contains functions used for calculating the tick interval of the jqxGauge custom element.
• jqxnumerictextbox.js -- this file contains the jqx-numeric-text-box custom element. The digital display of jqxGauge is an instance of jqx-numeric-text-box.
• jqxbutton.js -- necessary for the initialization of the digital display.
• niComplex.js -- necessary for the initialization of the digital display.

jqxGauge also requires the following style sheets in order to be displayed correctly:

• jqx.base.css -- the base style sheet file.

Initialization

To initialize (instantiate) a jqxGauge custom element, insert the following tag in an HTML page:

<jqx-gauge></jqx-gauge>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<jqx-gauge analog-display-type="needle" digital-display min="0" max="10000" value="5000"></jqx-gauge>

Getting and setting properties dynamically

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('jqx-gauge');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let min = customElement.min;

Here is an example showing how to set a property dynamically:

customElement.min = 0;

Calling methods

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('jqx-gauge');

Methods are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to call a method:

customElement.val(100);

jqxLED

jqxLED is a clickable button with three states: checked, unchecked and indeterminate. The element could be used as indicator when is set to readonly.

Required files

The jqxLED element requires the following file references to be placed on a web page in order for the custom element to be successfully registered and properly working:

• jqxelement.js -- this is the base file that defines the common architecture of all jqx custom elements. It is part of the repository ni-kismet/jqx-element.
• jqxbutton.js -- this file defines the functionality of the jqxButton custom element. jqxLED inherits jqxButton custom element.
• jqxled.js -- this file defines the functionality of the jqxLED custom element.

jqxLED also requires the following style sheets in order to be displayed correctly.

• jqx.base.css -- the base style sheet file.

Initialization

To create an instance of a jqxLED custom element, insert the following tag in an HTML page:

<jqx-led></jqx-led>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<jqx-led checked name="led1" value="5" disabled right-to-left ></jqx-led>

Getting and setting properties dynamically

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('jqx-led');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let checked = customElement.checked;

Here is an example showing how to set a property dynamically:

customElement.checked = true;

jqxListBox

jqxListBox is a list box that contains items that can be selected by clicking on them. The keyboard can be used to navigate through the items (dependng on the selection mode).

Required files

The jqxListBox element requires the following file references to be placed on a web page in order for the custom element to be successfully registered and properly working:

• jqxelement.js -- this is the base file that defines the common architecture of all jqx custom elements. It is part of the repository ni-kismet/jqx-element.
• jqxbutton.js -- this file defines the functionality of the jqxButton custom element. jqxScrollBar uses repeat buttons.
• jqxscrollbar.js -- this file defines the functionality of the jqxScrollBar custom element.
• jqxlistbox.js -- this file defines the functionality of the jqxListBox custom element.

jqxListBox also requires the following style sheets in order to be displayed correctly.

• jqx.base.css -- the base style sheet file.

Initialization

To create an instance of a jqxListBox custom element, insert the following tag in an HTML page:

<jqx-list-box></jqx-list-box>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<jqx-list-box sorted grouped selected-indexes=[2] ></jqx-list-box>

Getting and setting properties dynamically

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('jqx-list-box');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let sorted = customElement.sorted;

Here is an example showing how to set a property dynamically:

customElement.sorted = true;

Styling

jqx-list-box uses the following CSS variables:

• --jqx-list-box-scroll-bar-size - Used to set the size of the scrollbars (width of the vertical and height of the horizontal). Default value is 20px;
• --jqx-list-box-filter-input-size - Used to set the size(height) of the input field for the filtering. Default value is 25px.

jqxNumericTextBox

jqxNumericTextBox is a basic text input that accepts keyboard input, optionally includes increment decrement buttons, and can display numeric data in a variety of different formats.

Required files

jqxNumericTextBox requires the following scripts to be referenced on a page in order for the custom element to be successfully registered and to work correctly:

• jqxelement.js -- this is the base file that defines the common architecture of all jqx custom elements. It is part of the repository ni-kismet/jqx-element.
• jqxnumerictextbox.js -- this file defines the functionality of the jqxNumericTextBox custom element.
• jqxbutton.js -- this file contains the jqx-repeat-button custom element. The spin buttons of jqxNumericTextBox are instances of jqx-repeat-button.
• jqxnumberrenderer.js -- this file contains several functions used for rendering the value of the jqxNumericTextBox custom element.
• jqxnumericprocessor.js -- this file contains functions used for the processing of numeric objects.
• jqxmath.js -- this file contains many of the mathematical functions used by the jqxNumericTextBox custom element.
• niComplex.js -- this file is necessary for the complex number support of the jqxNumericTextBox custom element. It is part of the repository ni-kismet/data-types.

jqxNumericTextBox also requires the following style sheet in order to be displayed correctly.

• jqx.base.css -- the base style sheet file.

Initialization

To initialize (instantiate) a jqxNumericTextBox custom element, insert the following tag in an HTML page:

<jqx-numeric-text-box></jqx-numeric-text-box>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<jqx-numeric-text-box input-format="floatingPoint" spin-buttons min="5" max="10"></jqx-numeric-text-box>

Getting and setting properties dynamically

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('jqx-numeric-text-box');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let min = customElement.min;

Here is an example showing how to set a property dynamically:

customElement.min = 0;

Calling methods

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('jqx-numeric-text-box');

Methods are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to call a method:

customElement.val('inf');

jqxPowerButton

jqxPowerButton represents a switch button that has three states: null, checked and unchecked. The state can be changed by clicking on the element or by setting the checked property to the desired state.

Required files

The jqxPowerButton element requires the following file references to be placed on a web page in order for the custom element to be successfully registered and properly working:

• jqxelement.js -- this is the base file that defines the common architecture of all jqx custom elements. It is part of the repository ni-kismet/jqx-element.
• jqxpowerbutton.js -- this file defines the functionality of the jqxPowerButton custom element.

jqxPowerButton also requires the following style sheets in order to be displayed correctly.

• jqx.base.css -- the base style sheet file.

Initialization

To create an instance of the jqxPowerButton custom element, insert the following tag in an HTML page:

<jqx-power-button></jqx-power-button>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<jqx-power-button checked></jqx-power-button>

Getting and setting properties dynamically

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('jqx-power-button');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let customElement = customElement.checked;

Here is an example showing how to set a property dynamically:

customElement.checked = true;

jqxProgressBar

jqxProgressbar is a basic progress bar that accepts a value and shows a colored bar that describes the stage of the current process. There are three types: horizontal, vertical and circular.

Required files

The jqxProgressBar element requires the following file references to be placed on a web page in order for the custom element to be successfully registered and properly working:

• jqxelement.js -- this is the base file that defines the common architecture of all jqx custom elements. It is part of the repository ni-kismet/jqx-element.
• jqxprogressbar.js -- this file defines the functionality of the jqxProgressBar custom element.

jqxProgressBar also requires the following style sheets in order to be displayed correctly.

• jqx.base.css -- the base style sheet file.

Initialization

To create an instance of a horizontal jqxProgressBar custom element, insert the following tag in an HTML page:

<jqx-progress-bar></jqx-progress-bar>

To create an instance of a vertical jqxProgressBar custom element, insert the following tag in an HTML page:

<jqx-progress-bar orientation="vertical"></jqx-progress-bar>

To create an instance of a circular jqxProgressBar custom element, insert the following tag in an HTML page:

<jqx-circular-progress-bar></jqx-circular-progress-bar>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<jqx-progress-bar value="20" max="40" min="5" orientation="horizontal" inverted></jqx-progress-bar>

<jqx-circular-progress-bar value="20" max="40" min="5" inverted></jqx-circular-progress-bar>

Getting and setting properties dynamically

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('jqx-progress-bar');

and for the Circular Progress Bar:

let customElement = document.querySelector('jqx-circular-progress-bar');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let customElement = customElement.value;

Here is an example showing how to set a property dynamically:

customElement.value = 0;

Animations

By default the animations(transitions) for the jqxProgressBar are disabled (material design animations when value is "null" are enabled). They can be enabled by adding the CSS class called "animation" to the element, like so:

<jqx-progress-bar class="animation"></jqx-progress-bar>
<jqx-progress-bar class="animation" orientation="vertical"></jqx-progress-bar>
<jqx-circular-progress-bar class="animation"></jqx-circular-progress-bar>

Styling

The jqx-circular-progress-bar uses the following CSS variables:

• --jqx-circular-progress-bar-fill-size - Used to set the width of the fill which is relative to the size of the inner container(the HTML container in the middle of the element). Default value is 20%.

jqxRadioButton

jqxRadioButton is a simple HTML radio button that offers the functionality to be checked or not(depending on wheather there's another radio button in the same group).

Required files

The jqxRadioButton element requires the following file references to be placed on a web page in order for the custom element to be successfully registered and properly working:

• jqxelement.js -- this is the base file that defines the common architecture of all jqx custom elements. It is part of the repository ni-kismet/jqx-element.
• jqxbutton.js -- this is the base button class. Radio button inherits it.
• jqxradiobutton.js -- this file defines the functionality of the jqxRadioButton custom element.

jqxRadioButton also requires the following style sheets in order to be displayed correctly.

• jqx.base.css -- the base style sheet file.

Initialization

To create an instance of a jqxRadioButton custom element, insert the following tag in an HTML page:

<jqx-radio-button></jqx-radio-button>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<jqx-radio-button checked name="radioButton1" group-name="one" enable-container-click></jqx-radio-button>

Getting and setting properties dynamically

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('jqx-radio-button');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let checked = customElement.checked;

Here is an example showing how to set a property dynamically:

customElement.checked = true;

jqxRepeatButton

jqxRepeatButton represents a repeat button that can be clicked with or without a delay. The delay time can be changed by setting the delay property to the desired amount.

Required files

The jqxRepeatButton element requires the following file references to be placed on a web page in order for the custom element to be successfully registered and properly working:

• jqxelement.js -- this is the base file that defines the common architecture of all jqx custom elements. It is part of the repository ni-kismet/jqx-element.
• jqxrepeatbutton.js -- this file defines the functionality of the jqxRepeatButton custom element.

jqxPowerButton also requires the following style sheets in order to be displayed correctly.

• jqx.base.css -- the base style sheet file.

Initialization

To create an instance of the jqxRepeatButton custom element, insert the following tag in an HTML page:

<jqx-repeat-button></jqx-repeat-button>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<jqx-repeat-button delay="100"></jqx-repeat-button>

Getting and setting properties dynamically

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('jqx-repeat-button');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let customElement = customElement.delay;

Here is an example showing how to set a property dynamically:

customElement.delay = 100;

jqxScrollBar

jqxScrollBar is a numeric control used to select a numeric value from a range of values by moving a thumb along a track, clicking on the track or clicking on the buttons located on both ends of the track. It is typically used in conjucntion with the listbox and dropdown elements to allow scrolling through the items. The user can change the value by clicking on the buttons of the scrollBar, clicking inside the track area or moving the thumb along the track. The scroll bar can be horizontal or vertical.

Required files

jqxScrollBar requires the following scripts to be referenced on a page in order for the custom element to be successfully registered and to work correctly:

• jqxelement.js -- this is the base file that defines the common architecture of all jqx custom elements. It is part of the repository ni-kismet/jqx-element.
• jqxscrollbar.js -- this file defines the functionality of the jqxScrollBar.
• jqxbutton.js -- this file contains the jqx-repeat-button custom element. The buttons of jqxScrollBar are instances of jqx-repeat-button. jqxScrollBar also requires the following style sheets in order to be displayed correctly.
• jqx.base.css -- the base style sheet file.

Initialization

To initialize (instantiate) a jqxScrollBar custom element, insert the following tag in an HTML page:

<jqx-scroll-bar></jqx-scroll-bar>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<jqx-scroll-bar orientation="vertical" min="50" max="500" value="350"></jqx-scroll-bar>

Getting and setting properties dynamically

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('jqx-scroll-bar');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let min = customElement.min;

Here is an example showing how to set a property dynamically:

customElement.min = 0;

jqxSlider

jqxSlider is a numeric control used to select a numeric value from a range of values by moving a thumb along a track.

Required files

jqxSlider requires the following scripts to be referenced on a page in order for the custom element to be successfully registered and to work correctly:

• jqxelement.js -- this is the base file that defines the common architecture of all jqx custom elements. It is part of the repository ni-kismet/jqx-element.
• jqxtank.js -- this file defines the functionality of the jqxTank custom element which jqxSlider extends.
• jqxslider.js -- this file defines the unique functionality of the jqxSlider custom element.
• jqxbutton.js -- this file contains the jqx-repeat-button custom element. The spin buttons of jqxSlider are instances of jqx-repeat-button.
• jqxnumberrenderer.js -- this file contains several functions used for rendering the value of the jqxSlider custom element.
• jqxnumericprocessor.js -- this file contains functions used for the processing of numeric objects.
• jqxmath.js -- this file contains many of the mathematical functions used by the jqxSlider custom element.
• jqxtickintervalhandler.js -- this file contains functions used for calculating the tick interval of the jqxSlider custom element.

jqxSlider also requires the following style sheets in order to be displayed correctly.

• jqx.base.css -- the base style sheet file.

Initialization

To initialize (instantiate) a jqxSlider custom element, insert the following tag in an HTML page:

<jqx-slider></jqx-slider>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<jqx-slider orientation="vertical" min="0" max="100" value="33" scale-position="near"></jqx-slider>

Getting and setting properties dynamically

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('jqx-slider');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let min = customElement.min;

Here is an example showing how to set a property dynamically:

customElement.min = 0;

Calling methods

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('jqx-slider');

Methods are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to call a method:

customElement.val(100);

jqxSwitchButton

jqxSwitchButton represents a switch button that has three states: null, checked and unchecked. The state can be changed by clicking on the element, dragging the element's thumb or by setting the checked property to the desired state.

Required files

The jqxSwitchButton element requires the following file references to be placed on a web page in order for the custom element to be successfully registered and properly working:

• jqxelement.js -- this is the base file that defines the common architecture of all jqx custom elements. It is part of the repository ni-kismet/jqx-element.
• jqxbutton.js -- this is the base file for the buttons. Swtich button element inherits button's functionality.
• jqxswitchbutton.js -- this file defines the functionality of the jqxSwitchButton custom element.

jqxProgressBar also requires the following style sheets in order to be displayed correctly.

• jqx.base.css -- the base style sheet file.

Initialization

To create an instance of a horizontal jqxSwitchButton custom element, insert the following tag in an HTML page:

<jqx-switch-button></jqx-switch-button>

To create an instance of a vertical jqxSwitchButton custom element, insert the following tag in an HTML page:

<jqx-switch-button orientation="vertical"></jqx-switch-button>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<jqx-switch-button checked inverted orientation="vertical" switch-mode="click"></jqx-switch-button>

Getting and setting properties dynamically

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('jqx-switch-button');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let customElement = customElement.checked;

Here is an example showing how to set a property dynamically:

customElement.checked = true;

Animations

By default the animations for the jqxSwitchButton are disabled. They can be enabled by adding the CSS class called "animation" to the element, like so:

<jqx-switch-button class="animation"></jqx-switch-button> <br />
<jqx-switch-button class="animation" orientation="vertical"></jqx-switch-button>

Styling

The jqx-switch-button uses the following CSS variables:

• --jqx-switch-button-width: Used to set the width of the element.
• --jqx-switch-button-height: Used to set the height of the element.
• --jqx-switch-button-thumb-size: Uset to set the size of the thumb.
• --jqx-switch-button-thumb-color: Used to set the color of the thumb.
• --jqx-switch-button-color-on: Used to set the color of the label of the psudo element and the background color of the thumb when the Switch button is checked.
• --jqx-switch-button-label-on: Used to set the label of the pseudo element when the Switch button is checked.
• --jqx-switch-button-label-off: Used to set the label of the pseudo element when the Switch button is unchecked.
• --jqx-switch-button-label-on-background-color: Used to change the background color of the pseudo element when Switch Button is checked.
• --jqx-switch-button-label-off-background-color: Used to change the background color of the pseudo element when Switch Button is unchecked.
• --jqx-switch-button-label-animation-offset: Used for the animation of the labels. Sets the offset of the labels of the Switch Button.
• --jqx-switch-button-border-radius: Used to set the border radius of the Switch Button custom element.

jqxTabs

jqxTabs represents a custom element with selectable tabs and content sections associated with them.

Required files

jqxTabs requires the following scripts to be referenced on a page in order for the custom element to be successfully registered and to work correctly:

• jqxelement.js -- this is the base file that defines the common architecture of all jqx custom elements. It is part of the repository ni-kismet/jqx-element.
• jqxtabs.js -- this file defines the main functionality of the jqxTabs custom element.
• jqxbutton.js -- this file contains the jqx-repeat-button custom element. The scroll buttons of jqxTabs are instances of jqx-repeat-button.

jqxTabs also requires the following style sheets in order to be displayed correctly.

• jqx.base.css -- the base style sheet file.

Initialization

To initialize (instantiate) a jqxTabs custom element, insert the following tag in an HTML page:

<jqx-tabs>
    <jqx-tab-item title="TAB 1">Content 1</jqx-tab-item>
    <jqx-tab-item title="TAB 2" selected>Content 2</jqx-tab-item>
    <jqx-tab-item title="TAB 3">Content 3</jqx-tab-item>
    <jqx-tab-item title="TAB 4">Content 4</jqx-tab-item>
</jqx-tabs>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<jqx-tabs position="left" selection-mode="mouseenter">
    <jqx-tab-item title="TAB 1">Content 1</jqx-tab-item>
    <jqx-tab-item title="TAB 2" selected>Content 2</jqx-tab-item>
    <jqx-tab-item title="TAB 3">Content 3</jqx-tab-item>
    <jqx-tab-item title="TAB 4">Content 4</jqx-tab-item>
</jqx-tabs>

Getting and setting properties dynamically

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('jqx-tabs');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let position = customElement.position;

Here is an example showing how to set a property dynamically:

customElement.position = 'bottom';

Calling methods

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('jqx-tabs');

Methods are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to call a method:

customElement.select(3);

Styling

jqxTabs uses the following CSS variable:

• --jqx-tabs-header-button-size -- used to set the size of the scroll buttons and dropdown button of jqxTabs (their width when position is 'top' or 'bottom' and their height when position is 'left' or 'right'). Default value is 20px.

jqxTank

jqxTank is a numeric control used to display a numeric value from a range of values.

Required files

jqxTank requires the following scripts to be referenced on a page in order for the custom element to be successfully registered and to work correctly:

• jqxelement.js -- this is the base file that defines the common architecture of all jqx custom elements. It is part of the repository ni-kismet/jqx-element.
• jqxtank.js -- this file defines the functionality of the jqxTank custom element.
• jqxnumberrenderer.js -- this file contains several functions used for rendering the value of the jqxTank custom element.
• jqxnumericprocessor.js -- this file contains functions used for the processing of numeric objects.
• jqxmath.js -- this file contains many of the mathematical functions used by the jqxTank custom element.
• jqxtickintervalhandler.js -- this file contains functions used for calculating the tick interval of the jqxTank custom element.

jqxTank also requires the following style sheets in order to be displayed correctly.

• jqx.base.css -- the base style sheet file.

Initialization

To initialize (instantiate) a jqxTank custom element, insert the following tag in an HTML page:

<jqx-tank></jqx-tank>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<jqx-tank orientation="vertical" min="0" max="100" value="33" scale-position="near"></jqx-tank>

Getting and setting properties dynamically

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('jqx-tank');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let min = customElement.min;

Here is an example showing how to set a property dynamically:

customElement.min = 0;

Calling methods

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('jqx-tank');

Methods are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to call a method:

customElement.val(100);

jqxToggleButton

jqxToggleButton represents a simple toggle button that has two states: checked and unchecked. The state can be changed by clicking on the element or by setting the checked property to the desired state.

Required files

The jqxToggleButton element requires the following file references to be placed on a web page in order for the custom element to be successfully registered and properly working:

• jqxelement.js -- this is the base file that defines the common architecture of all jqx custom elements. It is part of the repository ni-kismet/jqx-element.
• jqxbutton.js -- this file defines the functionality of the jqxToggleButton custom element.

jqxPowerButton also requires the following style sheets in order to be displayed correctly.

• jqx.base.css -- the base style sheet file.

Initialization

To create an instance of the jqxToggleButton custom element, insert the following tag in an HTML page:

<jqx-toggle-button></jqx-toggle-button>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<jqx-toggle-button checked></jqx-toggle-button>

Getting and setting properties dynamically

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('jqx-toggle-button');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let customElement = customElement.checked;

Here is an example showing how to set a property dynamically:

customElement.checked = true;

Notes

Icons in Firefox

Arrows and other visual elements in jqx custom elements are displayed through the use of glyphicons.

Firefox has a setting that prevents HTML pages from accessing files with glyphicons when working locally and not from files on a server. To properly display glyphicons when developing locally, please do the following:

• Open about:config in the Firefox address bar;
• Search for the security.fileuri.strict_origin_policy property and change it from true to false.