| Name | Type | Default |
|---|
|
animationShowDuration
|
Number
|
350
|
Sets or gets the animationShowDuration property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { render() { return ( <JqxMenu ref='myMenu' width={670} height={30} animationShowDuration={400}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
animationHideDuration
|
Number
|
250
|
Sets or gets the animationHideDuration property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { render() { return ( <JqxMenu ref='myMenu' width={670} height={30} animationHideDuration={3000}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
animationHideDelay
|
Number
|
500
|
Sets or gets the animationHideDelay property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { render() { return ( <JqxMenu ref='myMenu' width={670} height={30} animationHideDelay={3000}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
animationShowDelay
|
Number
|
200
|
Sets or gets the animationShowDelay property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { render() { return ( <JqxMenu ref='myMenu' width={670} height={30} animationShowDelay={300}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
autoCloseInterval
|
Number
|
10000
|
Sets or gets the autoCloseInterval property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { render() { return ( <JqxMenu ref='myMenu' width={670} height={30} autoCloseInterval={300}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
autoSizeMainItems
|
Boolean
|
true
|
Sets or gets the autoSizeMainItems property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { render() { return ( <JqxMenu ref='myMenu' width={670} height={30} autoSizeMainItems={false}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
autoCloseOnClick
|
Boolean
|
true
|
Sets or gets the autoCloseOnClick property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { render() { return ( <JqxMenu ref='myMenu' width={670} height={30} autoCloseOnClick={false}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
autoOpenPopup
|
Boolean
|
true
|
Sets or gets the autoOpenPopup property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { render() { return ( <JqxMenu ref='myMenu' width={670} height={30} autoOpenPopup={false}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
autoOpen
|
Boolean
|
true
|
Sets or gets the autoOpen property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { render() { return ( <JqxMenu ref='myMenu' width={670} height={30} autoOpen={false}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
autoCloseOnMouseLeave
|
Boolean
|
true
|
Sets or gets the autoCloseOnMouseLeave property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { render() { return ( <JqxMenu ref='myMenu' width={670} height={30} autoCloseOnMouseLeave={false}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
clickToOpen
|
Boolean
|
false
|
Sets or gets the clickToOpen property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { render() { return ( <JqxMenu ref='myMenu' width={670} height={30} clickToOpen={true}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
disabled
|
Boolean
|
false
|
Sets or gets the disabled property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { render() { return ( <JqxMenu ref='myMenu' width={670} height={30} disabled={true}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
enableHover
|
Boolean
|
true
|
Sets or gets the enableHover property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { render() { return ( <JqxMenu ref='myMenu' width={670} height={30} enableHover={false}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
easing
|
String
|
easeInOutSine
|
Sets or gets the easing property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { render() { return ( <JqxMenu ref='myMenu' width={670} height={30} easing={ 'linear'}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
height
|
Number
|
null
|
Sets or gets the height property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { render() { return ( <JqxMenu ref='myMenu' width={670} height={30}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
keyboardNavigation
|
Boolean
|
false
|
Sets or gets the keyboardNavigation property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { render() { return ( <JqxMenu ref='myMenu' width={670} height={30} keyboardNavigation={true}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
minimizeWidth
|
String
|
'auto'
|
Sets or gets the minimizeWidth property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { render() { return ( <JqxMenu ref='myMenu' width={670} height={30} minimizeWidth={450}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
mode
|
String
|
horizontal
|
Sets or gets the mode property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { render() { return ( <JqxMenu ref='myMenu' width={670} height={30} mode={ 'vertical'}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
popupZIndex
|
Number
|
20000
|
Sets or gets the popupZIndex property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { render() { return ( <JqxMenu ref='myMenu' width={670} height={30} popupZIndex={99999}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
rtl
|
Boolean
|
false
|
Sets or gets the rtl property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { render() { return ( <JqxMenu ref='myMenu' width={670} height={30} rtl={true}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
showTopLevelArrows
|
Boolean
|
false
|
Sets or gets the showTopLevelArrows property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { render() { return ( <JqxMenu ref='myMenu' width={670} height={30} showTopLevelArrows={true}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
source
|
Object
|
null
|
Sets or gets the source property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { render() { return ( <JqxMenu ref='myMenu' width={670} height={30} source={source}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
theme
|
String
|
''
|
Sets or gets the theme property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { render() { return ( <JqxMenu ref='myMenu' width={670} height={30} theme={ 'energyblue'}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
width
|
Number
|
null
|
Sets or gets the width property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { render() { return ( <JqxMenu ref='myMenu' width={670} height={30}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
|
|
closed
|
Event
|
|
This event is triggered when any of the jqxMenu Sub Menus is closed.
Code examples
Bind to the closed event of jqxMenu.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { componentDidMount() { this.refs.myMenu.on('closed', (event) => { // Do Something... }); } render() { return ( <JqxMenu ref= 'myMenu' width={670} height={30}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
itemclick
|
Event
|
|
This event is triggered when a menu item is clicked.
Code examples
Bind to the itemclick event of jqxMenu.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { componentDidMount() { this.refs.myMenu.on('itemclick', (event) => { // Do Something... }); } render() { return ( <JqxMenu ref= 'myMenu' width={670} height={30}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
initialized
|
Event
|
|
This event is triggered after the menu is initialized.
Code examples
Bind to the initialized event of jqxMenu.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { componentDidMount() { this.refs.myMenu.on('initialized', (event) => { // Do Something... }); } render() { return ( <JqxMenu ref= 'myMenu' width={670} height={30}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
shown
|
Event
|
|
This event is triggered when any of the jqxMenu Sub Menus is displayed.
Code examples
Bind to the shown event of jqxMenu.
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { componentDidMount() { this.refs.myMenu.on('shown', (event) => { // Do Something... }); } render() { return ( <JqxMenu ref= 'myMenu' width={670} height={30}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
|
| Name | Return Type |
|---|
|
closeItem
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { componentDidMount() { this.refs.myMenu.closeItem(Item1); } render() { return ( <JqxMenu ref= 'myMenu' width={670} height={30}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
close
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { componentDidMount() { this.refs.myMenu.close(); } render() { return ( <JqxMenu ref= 'myMenu' width={670} height={30}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
disable
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { componentDidMount() { this.refs.myMenu.disable(0,true); } render() { return ( <JqxMenu ref= 'myMenu' width={670} height={30}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
destroy
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { componentDidMount() { this.refs.myMenu.destroy(); } render() { return ( <JqxMenu ref= 'myMenu' width={670} height={30}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
focus
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { componentDidMount() { this.refs.myMenu.focus(); } render() { return ( <JqxMenu ref= 'myMenu' width={670} height={30}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
minimize
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { componentDidMount() { this.refs.myMenu.minimize(); } render() { return ( <JqxMenu ref= 'myMenu' width={670} height={30}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
open
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { componentDidMount() { this.refs.myMenu.open(10,10); } render() { return ( <JqxMenu ref= 'myMenu' width={670} height={30}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
openItem
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { componentDidMount() { this.refs.myMenu.openItem(Item1); } render() { return ( <JqxMenu ref= 'myMenu' width={670} height={30}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
restore
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { componentDidMount() { this.refs.myMenu.restore(); } render() { return ( <JqxMenu ref= 'myMenu' width={670} height={30}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
setItemOpenDirection
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxMenu from 'jqwidgets-react/react_jqxmenu.js'; class App extends React.Component { componentDidMount() { this.refs.myMenu.setItemOpenDirection(Item1,left,top); } render() { return ( <JqxMenu ref= 'myMenu' width={670} height={30}> <ul> <li><a href="#Home">Home </a></li> <li> Solutions <ul style="width: 250px;"> <li>Education </li> <li type="separator"></li> <li> Software Solutions <ul style="width: 220px;"> <li>Consumer Photo </li> </ul> </li> <li>All Industries And Solutions </li> </ul> </li> <li> Products <ul> <li>PC Products </li> </ul> </li> <li> Support <ul style="width: 200px;"> <li>Support Home </li> </ul> </li> <li> Communities <ul style="width: 200px;"> <li>Designers </li> <li>Developers </li> </ul> </li> </ul> </JqxMenu> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
