| Name | Type | Default |
|---|---|---|
| animationShowDuration | number | 350 |
|
Sets or gets the duration of the show animation. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public render() {
return (
<JqxMenu ref={this.myMenu}
width={400} animationShowDuration={3000}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| animationHideDuration | number | 250 |
|
Sets or gets the duration of the hide animation. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public render() {
return (
<JqxMenu ref={this.myMenu}
width={400} animationHideDuration={3000}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| animationHideDelay | number | 500 |
|
Sets or gets the delay before the start of the hide animation. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public render() {
return (
<JqxMenu ref={this.myMenu}
width={400} animationHideDelay={3000}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| animationShowDelay | number | 200 |
|
Sets or gets the delay before the start of the show animation. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public render() {
return (
<JqxMenu ref={this.myMenu}
width={400} animationShowDelay={300}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| autoCloseInterval | number | 10000 |
|
Sets or gets the time interval after which all opened items will be closed. When you open a new sub menu, the interval is cleared. If you want to disable this automatic closing behavior of the jqxMenu, you need to set the autoCloseInterval property to 0. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public render() {
return (
<JqxMenu ref={this.myMenu}
width={400} autoCloseInterval={300}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| autoSizeMainItems | boolean | true |
|
Auto-Sizes the jqxMenu's main items when the menu's mode is 'horizontal'. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public render() {
return (
<JqxMenu ref={this.myMenu}
width={400} autoSizeMainItems={false}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| autoCloseOnClick | boolean | true |
|
Automatically closes the opened popups after a click. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public render() {
return (
<JqxMenu ref={this.myMenu}
width={400} autoCloseOnClick={false}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| autoOpenPopup | boolean | true |
|
Opens the Context Menu when the right-mouse button is pressed. When this property is set to false, the /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public render() {
return (
<JqxMenu ref={this.myMenu}
width={400} autoOpenPopup={false}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| autoOpen | boolean | true |
|
Opens the top level menu items when the user hovers them. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public render() {
return (
<JqxMenu ref={this.myMenu}
width={400} autoOpen={false}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| autoCloseOnMouseLeave | boolean | true |
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public render() {
return (
<JqxMenu ref={this.myMenu}
width={400} autoCloseOnMouseLeave={false}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| clickToOpen | boolean | false |
|
Opens an item after a click by the user. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public render() {
return (
<JqxMenu ref={this.myMenu}
width={400} clickToOpen={true}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| disabled | boolean | false |
|
Enables or disables the jqxMenu. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public render() {
return (
<JqxMenu ref={this.myMenu}
width={400} disabled={true}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| enableHover | boolean | true |
|
Enables or disables the hover state. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public render() {
return (
<JqxMenu ref={this.myMenu}
width={400} enableHover={false}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| easing | string | easeInOutSine |
|
Sets or gets the animation's easing to one of the JQuery's supported easings. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public render() {
return (
<JqxMenu ref={this.myMenu}
width={400} easing={'linear'}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| height | string | number | null |
|
Sets or gets the jqxMenu's height. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public render() {
return (
<JqxMenu ref={this.myMenu}
width={400} height={30}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| keyboardNavigation | boolean | false |
|
Enables or disables the jqxMenu's keyboard navigation. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public render() {
return (
<JqxMenu ref={this.myMenu}
width={400} keyboardNavigation={true}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| minimizeWidth | number | string | 'auto' |
|
Sets or gets the jqxMenu's minimizeWidth. That width determines the minimum browser window's width when the Menu will switch from normal to minimized mode and the Menu's width is in percentages. Set it to null, if you want to disable that behavior. Note: jqxMenu automatically switches to minimized mode, when it is displayed on a touch device. By setting the property to null, you will disable that behavior, too. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public render() {
return (
<JqxMenu ref={this.myMenu}
width={400} minimizeWidth={450}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| mode | MenuMode | horizontal |
|
MenuMode: "horizontal" | "vertical" | "popup"
Sets or gets the menu's display mode. Possible Values:/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public render() {
return (
<JqxMenu ref={this.myMenu}
width={400} mode={'vertical'}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| popupZIndex | number | string | 20000 |
|
Sets or gets the popup's z-index. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public render() {
return (
<JqxMenu ref={this.myMenu}
width={400} popupZIndex={99999}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| rtl | boolean | false |
|
Sets or getsa value indicating whether widget's elements are aligned to support locales using right-to-left fonts. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public render() {
return (
<JqxMenu ref={this.myMenu}
width={400} rtl={true}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| showTopLevelArrows | boolean | false |
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public render() {
return (
<JqxMenu ref={this.myMenu}
width={400} showTopLevelArrows={true}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| source | any | null |
|
Specifies the jqxMenu's data source. Use this property to populate the jqxMenu.
|
||
| theme | string | '' |
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public render() {
return (
<JqxMenu ref={this.myMenu}
width={400} theme={'material'}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| width | string | number | null |
|
Sets or gets the jqxMenu's width. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public render() {
return (
<JqxMenu ref={this.myMenu}
width={400}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
Events |
||
| closed | Event | |
|
This event is triggered when any of the jqxMenu Sub Menus is closed. Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public render() {
return (
<JqxMenu ref={this.myMenu} onClosed={this.onClosed}
width={400}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
private onClosed(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| itemclick | Event | |
|
This event is triggered when a menu item is clicked. Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public render() {
return (
<JqxMenu ref={this.myMenu} onItemclick={this.onItemclick}
width={400}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
private onItemclick(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| shown | Event | |
|
This event is triggered when any of the jqxMenu Sub Menus is displayed. Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public render() {
return (
<JqxMenu ref={this.myMenu} onShown={this.onShown}
width={400}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
private onShown(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
Methods |
||
| Name | Arguments | Return Type |
| closeItem | itemID | |
|
Closes a menu item. |
||
| close | None | |
|
Closes the menu (only in context menu mode). |
||
| disable | itemID, value | |
|
Disables or enables a menu item. The method has two parameters - HTML Element ID and a boolean value which determines whether to disable or enable the element. |
||
| destroy | None | |
|
Destroys the widget. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public componentDidMount(): void {
this.myMenu.current!.destroy();
}
public render() {
return (
<JqxMenu ref={this.myMenu}
width={400}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| focus | None | |
|
Focuses the widget. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
class App extends React.PureComponent<{}, IMenuProps> {
private myMenu = React.createRef<JqxMenu>();
public componentDidMount(): void {
this.myMenu.current!.focus();
}
public render() {
return (
<JqxMenu ref={this.myMenu}
width={400}>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<ul>
<li>New
<ul>
<li>Corporate Use</li>
<li>Private Use</li>
</ul>
</li>
<li>Featured</li>
</ul>
</li>
<li>Events</li>
</ul>
</JqxMenu>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| minimize | None | |
|
Minimizes the widget. |
||
| open | left, top | |
|
Opens the menu(only in context menu mode). |
||
| openItem | itemID | |
|
Opens a menu item |
||
| restore | None | |
|
Restores the widget from the "minimized" state. |
||
| setItemOpenDirection | item, horizontaldirection, verticaldirection | |
|
Sets the item's popup open direction |
||