jqx-elements
Advanced tools
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>).
jqxButton is a simple HTML button that offers the functionality to change the value of the element.
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:
jqxButton also requires the following style sheets in order to be displayed correctly.
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>
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 element represents an input with a dropdown list of items.
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:
jqxComboBox also requires the following style sheets in order to be displayed correctly.
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>
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];
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 is a simple HTML checkbox that offers the functionality to change it's check state.
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:
jqxCheckbox also requires the following style sheets in order to be displayed correctly.
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>
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 represents a selection field that acts as a button and when clicked it opens/closes a list of selectable items.
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:
jqxDropDownList also requires the following style sheets in order to be displayed correctly.
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>
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];
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 is a circular (or semi-circular) numeric control used to display or select a value from a range.
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:
jqxGauge also requires the following style sheets in order to be displayed correctly:
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>
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;
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 is a clickable button with three states: checked, unchecked and indeterminate. The element could be used as indicator when is set to readonly.
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:
jqxLED also requires the following style sheets in order to be displayed correctly.
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>
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 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).
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:
jqxListBox also requires the following style sheets in order to be displayed correctly.
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>
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;
jqx-list-box uses the following CSS variables:
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.
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:
jqxNumericTextBox also requires the following style sheet in order to be displayed correctly.
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>
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;
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 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.
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:
jqxPowerButton also requires the following style sheets in order to be displayed correctly.
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>
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 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.
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:
jqxProgressBar also requires the following style sheets in order to be displayed correctly.
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>
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;
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>
The jqx-circular-progress-bar uses the following CSS variables:
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).
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:
jqxRadioButton also requires the following style sheets in order to be displayed correctly.
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>
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 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.
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:
jqxPowerButton also requires the following style sheets in order to be displayed correctly.
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>
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 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.
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:
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>
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 is a numeric control used to select a numeric value from a range of values by moving a thumb along a track.
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:
jqxSlider also requires the following style sheets in order to be displayed correctly.
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>
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;
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 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.
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:
jqxProgressBar also requires the following style sheets in order to be displayed correctly.
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>
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;
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>
The jqx-switch-button uses the following CSS variables:
jqxTabs represents a custom element with selectable tabs and content sections associated with them.
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:
jqxTabs also requires the following style sheets in order to be displayed correctly.
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>
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';
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);
jqxTabs uses the following CSS variable:
jqxTank is a numeric control used to display a numeric value from a range of values.
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:
jqxTank also requires the following style sheets in order to be displayed correctly.
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>
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;
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 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.
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:
jqxPowerButton also requires the following style sheets in order to be displayed correctly.
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>
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;
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:
about:config in the Firefox address bar;security.fileuri.strict_origin_policy property and change it from true to false.FAQs
Engineering Custom Elements
The npm package jqx-elements receives a total of 86 weekly downloads. As such, jqx-elements popularity was classified as not popular.
We found that jqx-elements demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.
Security News
CISA’s 2025 draft SBOM guidance adds new fields like hashes, licenses, and tool metadata to make software inventories more actionable.