| Name | Type | Default |
|---|
|
alwaysShowNavigationArrows
|
boolean
|
false
|
Sets or gets the jqxListMenu's alwaysShowNavigationArrows property. The alwaysShowNavigationArrows specifies whether navigation arrows are displayed for all items.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu'; class App extends React.PureComponent<{}, IListMenuProps> { private myListMenu = React.createRef<JqxListMenu>(); public render() { return ( <JqxListMenu ref={this.myListMenu} width={300} alwaysShowNavigationArrows={true}> <ul data-role="listmenu"> <li>OSI <ul data-role="listmenu"> <li>Application Layer <ol data-role="listmenu"> <li>SIP </li> <li>DNS </li> </ol> </li> <li>Presentation Layer <ol data-role="listmenu"> <li>SSL </li> <li>TLS </li> </ol> </li> <li>Session Layer <ol data-role="listmenu"> <li>NetBIOS </li> <li>SPDY </li> </ol> </li> </ul> </li> <li>TCP/IP <ul data-role="listmenu"> <li>Application layer <ol data-role="listmenu"> <li>DHCP </li> <li>DNS </li> <li>FTP </li> </ol> </li> <li>Transport layer <ol data-role="listmenu"> <li>TCP </li> <li>UDP </li> <li>SCTP </li> </ol> </li> <li>Internet layer <ol data-role="listmenu"> <li>IP </li> <li>ICMP </li> <li>ECN </li> </ol> </li> </ul> </li> </ul> </JqxListMenu> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
animationType
|
ListMenuAnimationType
|
"slide"
|
ListMenuAnimationType: "slide" | "fade"
Sets or gets the animation's type.
Possible Values:
'slide'
'fade'
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu'; class App extends React.PureComponent<{}, IListMenuProps> { private myListMenu = React.createRef<JqxListMenu>(); public render() { return ( <JqxListMenu ref={this.myListMenu} width={300} animationType={ 'fade'} animationDuration={1000}> <ul data-role="listmenu"> <li>OSI <ul data-role="listmenu"> <li>Application Layer <ol data-role="listmenu"> <li>SIP </li> <li>DNS </li> </ol> </li> <li>Presentation Layer <ol data-role="listmenu"> <li>SSL </li> <li>TLS </li> </ol> </li> <li>Session Layer <ol data-role="listmenu"> <li>NetBIOS </li> <li>SPDY </li> </ol> </li> </ul> </li> <li>TCP/IP <ul data-role="listmenu"> <li>Application layer <ol data-role="listmenu"> <li>DHCP </li> <li>DNS </li> <li>FTP </li> </ol> </li> <li>Transport layer <ol data-role="listmenu"> <li>TCP </li> <li>UDP </li> <li>SCTP </li> </ol> </li> <li>Internet layer <ol data-role="listmenu"> <li>IP </li> <li>ICMP </li> <li>ECN </li> </ol> </li> </ul> </li> </ul> </JqxListMenu> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
animationDuration
|
number | string
|
0
|
Sets or gets the animation duration in milliseconds.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu'; class App extends React.PureComponent<{}, IListMenuProps> { private myListMenu = React.createRef<JqxListMenu>(); public render() { return ( <JqxListMenu ref={this.myListMenu} width={300} animationDuration={500}> <ul data-role="listmenu"> <li>OSI <ul data-role="listmenu"> <li>Application Layer <ol data-role="listmenu"> <li>SIP </li> <li>DNS </li> </ol> </li> <li>Presentation Layer <ol data-role="listmenu"> <li>SSL </li> <li>TLS </li> </ol> </li> <li>Session Layer <ol data-role="listmenu"> <li>NetBIOS </li> <li>SPDY </li> </ol> </li> </ul> </li> <li>TCP/IP <ul data-role="listmenu"> <li>Application layer <ol data-role="listmenu"> <li>DHCP </li> <li>DNS </li> <li>FTP </li> </ol> </li> <li>Transport layer <ol data-role="listmenu"> <li>TCP </li> <li>UDP </li> <li>SCTP </li> </ol> </li> <li>Internet layer <ol data-role="listmenu"> <li>IP </li> <li>ICMP </li> <li>ECN </li> </ol> </li> </ul> </li> </ul> </JqxListMenu> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
autoSeparators
|
boolean
|
false
|
Sets or gets whether auto separators will be generated. Separator is generated for a sequence of list items with equal start character. The property is possible to be set through the attribute data-auto-separators="true".
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu'; class App extends React.PureComponent<{}, IListMenuProps> { private myListMenu = React.createRef<JqxListMenu>(); public render() { return ( <JqxListMenu ref={this.myListMenu} width={300} autoSeparators={true}> <ul data-role="listmenu"> <li>OSI <ul data-role="listmenu"> <li>Application Layer <ol data-role="listmenu"> <li>SIP </li> <li>DNS </li> </ol> </li> <li>Presentation Layer <ol data-role="listmenu"> <li>SSL </li> <li>TLS </li> </ol> </li> <li>Session Layer <ol data-role="listmenu"> <li>NetBIOS </li> <li>SPDY </li> </ol> </li> </ul> </li> <li>TCP/IP <ul data-role="listmenu"> <li>Application layer <ol data-role="listmenu"> <li>DHCP </li> <li>DNS </li> <li>FTP </li> </ol> </li> <li>Transport layer <ol data-role="listmenu"> <li>TCP </li> <li>UDP </li> <li>SCTP </li> </ol> </li> <li>Internet layer <ol data-role="listmenu"> <li>IP </li> <li>ICMP </li> <li>ECN </li> </ol> </li> </ul> </li> </ul> </JqxListMenu> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
backLabel
|
number | string
|
"Back"
|
Sets or gets the BackButton's label.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu'; class App extends React.PureComponent<{}, IListMenuProps> { private myListMenu = React.createRef<JqxListMenu>(); public render() { return ( <JqxListMenu ref={this.myListMenu} width={300} backLabel={ 'Back Button'}> <ul data-role="listmenu"> <li>OSI <ul data-role="listmenu"> <li>Application Layer <ol data-role="listmenu"> <li>SIP </li> <li>DNS </li> </ol> </li> <li>Presentation Layer <ol data-role="listmenu"> <li>SSL </li> <li>TLS </li> </ol> </li> <li>Session Layer <ol data-role="listmenu"> <li>NetBIOS </li> <li>SPDY </li> </ol> </li> </ul> </li> <li>TCP/IP <ul data-role="listmenu"> <li>Application layer <ol data-role="listmenu"> <li>DHCP </li> <li>DNS </li> <li>FTP </li> </ol> </li> <li>Transport layer <ol data-role="listmenu"> <li>TCP </li> <li>UDP </li> <li>SCTP </li> </ol> </li> <li>Internet layer <ol data-role="listmenu"> <li>IP </li> <li>ICMP </li> <li>ECN </li> </ol> </li> </ul> </li> </ul> </JqxListMenu> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
disabled
|
boolean
|
false
|
Sets or gets the jqxListMenu's disabled property.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu'; class App extends React.PureComponent<{}, IListMenuProps> { private myListMenu = React.createRef<JqxListMenu>(); public render() { return ( <JqxListMenu ref={this.myListMenu} width={300} disabled={true}> <ul data-role="listmenu"> <li>OSI <ul data-role="listmenu"> <li>Application Layer <ol data-role="listmenu"> <li>SIP </li> <li>DNS </li> </ol> </li> <li>Presentation Layer <ol data-role="listmenu"> <li>SSL </li> <li>TLS </li> </ol> </li> <li>Session Layer <ol data-role="listmenu"> <li>NetBIOS </li> <li>SPDY </li> </ol> </li> </ul> </li> <li>TCP/IP <ul data-role="listmenu"> <li>Application layer <ol data-role="listmenu"> <li>DHCP </li> <li>DNS </li> <li>FTP </li> </ol> </li> <li>Transport layer <ol data-role="listmenu"> <li>TCP </li> <li>UDP </li> <li>SCTP </li> </ol> </li> <li>Internet layer <ol data-role="listmenu"> <li>IP </li> <li>ICMP </li> <li>ECN </li> </ol> </li> </ul> </li> </ul> </JqxListMenu> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
enableScrolling
|
boolean
|
true
|
When the jqxListMenu is created with the enableScrolling property set to true, vertical scrollbar automatically appears, if the items overflow the visible area. In order to use this feature, the following files should be included: jqxpanel.js and jqxscrollbar.js.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu'; class App extends React.PureComponent<{}, IListMenuProps> { private myListMenu = React.createRef<JqxListMenu>(); public render() { return ( <JqxListMenu ref={this.myListMenu} width={300} enableScrolling={false}> <ul data-role="listmenu"> <li>OSI <ul data-role="listmenu"> <li>Application Layer <ol data-role="listmenu"> <li>SIP </li> <li>DNS </li> </ol> </li> <li>Presentation Layer <ol data-role="listmenu"> <li>SSL </li> <li>TLS </li> </ol> </li> <li>Session Layer <ol data-role="listmenu"> <li>NetBIOS </li> <li>SPDY </li> </ol> </li> </ul> </li> <li>TCP/IP <ul data-role="listmenu"> <li>Application layer <ol data-role="listmenu"> <li>DHCP </li> <li>DNS </li> <li>FTP </li> </ol> </li> <li>Transport layer <ol data-role="listmenu"> <li>TCP </li> <li>UDP </li> <li>SCTP </li> </ol> </li> <li>Internet layer <ol data-role="listmenu"> <li>IP </li> <li>ICMP </li> <li>ECN </li> </ol> </li> </ul> </li> </ul> </JqxListMenu> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
filterCallback
|
(text:ListMenuFilterCallback['text'], searchValue:ListMenuFilterCallback['searchValue']) => boolean
|
function (text, searchValue){return text.toString().toLowerCase().indexOf(searchValue.toLowerCase()) >= 0;};
|
Interface ListMenuFilterCallback {
text?: string;
searchValue?: string | number;
}
Used for filtering the jqxListMenu using the filter input.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu'; class App extends React.PureComponent<{}, IListMenuProps> { private myListMenu = React.createRef<JqxListMenu>(); constructor(props: {}) { super(props); this.state = { filterCallback: (text: string, searchValue: string | number): any => { return text.toString().toLowerCase().indexOf(searchValue.toLowerCase()) >= 0; } } } public render() { return ( <JqxListMenu ref={this.myListMenu} width={300} showFilter={true} filterCallback={this.state.filterCallback}> <ul data-role="listmenu"> <li>OSI <ul data-role="listmenu"> <li>Application Layer <ol data-role="listmenu"> <li>SIP </li> <li>DNS </li> </ol> </li> <li>Presentation Layer <ol data-role="listmenu"> <li>SSL </li> <li>TLS </li> </ol> </li> <li>Session Layer <ol data-role="listmenu"> <li>NetBIOS </li> <li>SPDY </li> </ol> </li> </ul> </li> <li>TCP/IP <ul data-role="listmenu"> <li>Application layer <ol data-role="listmenu"> <li>DHCP </li> <li>DNS </li> <li>FTP </li> </ol> </li> <li>Transport layer <ol data-role="listmenu"> <li>TCP </li> <li>UDP </li> <li>SCTP </li> </ol> </li> <li>Internet layer <ol data-role="listmenu"> <li>IP </li> <li>ICMP </li> <li>ECN </li> </ol> </li> </ul> </li> </ul> </JqxListMenu> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
height
|
number | string
|
auto
|
Sets or gets the jqxListMenu's height.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu'; class App extends React.PureComponent<{}, IListMenuProps> { private myListMenu = React.createRef<JqxListMenu>(); public render() { return ( <JqxListMenu ref={this.myListMenu} width={300} height={500}> <ul data-role="listmenu"> <li>OSI <ul data-role="listmenu"> <li>Application Layer <ol data-role="listmenu"> <li>SIP </li> <li>DNS </li> </ol> </li> <li>Presentation Layer <ol data-role="listmenu"> <li>SSL </li> <li>TLS </li> </ol> </li> <li>Session Layer <ol data-role="listmenu"> <li>NetBIOS </li> <li>SPDY </li> </ol> </li> </ul> </li> <li>TCP/IP <ul data-role="listmenu"> <li>Application layer <ol data-role="listmenu"> <li>DHCP </li> <li>DNS </li> <li>FTP </li> </ol> </li> <li>Transport layer <ol data-role="listmenu"> <li>TCP </li> <li>UDP </li> <li>SCTP </li> </ol> </li> <li>Internet layer <ol data-role="listmenu"> <li>IP </li> <li>ICMP </li> <li>ECN </li> </ol> </li> </ul> </li> </ul> </JqxListMenu> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
headerAnimationDuration
|
number | string
|
0
|
Sets or gets the animation duration of the header. Header of a listmenu could be set whether the data-role attribute of a list item is set to 'header'.
|
|
placeHolder
|
number | string
|
'Filter list items...'
|
Sets or gets the filter input field's place holder.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu'; class App extends React.PureComponent<{}, IListMenuProps> { private myListMenu = React.createRef<JqxListMenu>(); public render() { return ( <JqxListMenu ref={this.myListMenu} width={300} showFilter={true} placeHolder={ 'Search items...'}> <ul data-role="listmenu"> <li>OSI <ul data-role="listmenu"> <li>Application Layer <ol data-role="listmenu"> <li>SIP </li> <li>DNS </li> </ol> </li> <li>Presentation Layer <ol data-role="listmenu"> <li>SSL </li> <li>TLS </li> </ol> </li> <li>Session Layer <ol data-role="listmenu"> <li>NetBIOS </li> <li>SPDY </li> </ol> </li> </ul> </li> <li>TCP/IP <ul data-role="listmenu"> <li>Application layer <ol data-role="listmenu"> <li>DHCP </li> <li>DNS </li> <li>FTP </li> </ol> </li> <li>Transport layer <ol data-role="listmenu"> <li>TCP </li> <li>UDP </li> <li>SCTP </li> </ol> </li> <li>Internet layer <ol data-role="listmenu"> <li>IP </li> <li>ICMP </li> <li>ECN </li> </ol> </li> </ul> </li> </ul> </JqxListMenu> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
readOnly
|
boolean
|
false
|
Sets or gets whether the list will be read-only. In readOnly mode, items are not clickable.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu'; class App extends React.PureComponent<{}, IListMenuProps> { private myListMenu = React.createRef<JqxListMenu>(); public render() { return ( <JqxListMenu ref={this.myListMenu} width={300} readOnly={true}> <ul data-role="listmenu"> <li>OSI <ul data-role="listmenu"> <li>Application Layer <ol data-role="listmenu"> <li>SIP </li> <li>DNS </li> </ol> </li> <li>Presentation Layer <ol data-role="listmenu"> <li>SSL </li> <li>TLS </li> </ol> </li> <li>Session Layer <ol data-role="listmenu"> <li>NetBIOS </li> <li>SPDY </li> </ol> </li> </ul> </li> <li>TCP/IP <ul data-role="listmenu"> <li>Application layer <ol data-role="listmenu"> <li>DHCP </li> <li>DNS </li> <li>FTP </li> </ol> </li> <li>Transport layer <ol data-role="listmenu"> <li>TCP </li> <li>UDP </li> <li>SCTP </li> </ol> </li> <li>Internet layer <ol data-role="listmenu"> <li>IP </li> <li>ICMP </li> <li>ECN </li> </ol> </li> </ul> </li> </ul> </JqxListMenu> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
rtl
|
boolean
|
false
|
Sets or gets a 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 JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu'; class App extends React.PureComponent<{}, IListMenuProps> { private myListMenu = React.createRef<JqxListMenu>(); public render() { return ( <JqxListMenu ref={this.myListMenu} width={300} rtl={true}> <ul data-role="listmenu"> <li>OSI <ul data-role="listmenu"> <li>Application Layer <ol data-role="listmenu"> <li>SIP </li> <li>DNS </li> </ol> </li> <li>Presentation Layer <ol data-role="listmenu"> <li>SSL </li> <li>TLS </li> </ol> </li> <li>Session Layer <ol data-role="listmenu"> <li>NetBIOS </li> <li>SPDY </li> </ol> </li> </ul> </li> <li>TCP/IP <ul data-role="listmenu"> <li>Application layer <ol data-role="listmenu"> <li>DHCP </li> <li>DNS </li> <li>FTP </li> </ol> </li> <li>Transport layer <ol data-role="listmenu"> <li>TCP </li> <li>UDP </li> <li>SCTP </li> </ol> </li> <li>Internet layer <ol data-role="listmenu"> <li>IP </li> <li>ICMP </li> <li>ECN </li> </ol> </li> </ul> </li> </ul> </JqxListMenu> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
roundedCorners
|
boolean
|
true
|
Sets or gets the jqxListMenu's roundedCorners property.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu'; class App extends React.PureComponent<{}, IListMenuProps> { private myListMenu = React.createRef<JqxListMenu>(); public render() { return ( <JqxListMenu ref={this.myListMenu} width={300} roundedCorners={false}> <ul data-role="listmenu"> <li>OSI <ul data-role="listmenu"> <li>Application Layer <ol data-role="listmenu"> <li>SIP </li> <li>DNS </li> </ol> </li> <li>Presentation Layer <ol data-role="listmenu"> <li>SSL </li> <li>TLS </li> </ol> </li> <li>Session Layer <ol data-role="listmenu"> <li>NetBIOS </li> <li>SPDY </li> </ol> </li> </ul> </li> <li>TCP/IP <ul data-role="listmenu"> <li>Application layer <ol data-role="listmenu"> <li>DHCP </li> <li>DNS </li> <li>FTP </li> </ol> </li> <li>Transport layer <ol data-role="listmenu"> <li>TCP </li> <li>UDP </li> <li>SCTP </li> </ol> </li> <li>Internet layer <ol data-role="listmenu"> <li>IP </li> <li>ICMP </li> <li>ECN </li> </ol> </li> </ul> </li> </ul> </JqxListMenu> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
showNavigationArrows
|
boolean
|
true
|
Sets or gets the jqxListMenu's showNavigationArrows property. The showNavigationArrows specifies whether navigation arrows are displayed only for list items with nested Lists
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu'; class App extends React.PureComponent<{}, IListMenuProps> { private myListMenu = React.createRef<JqxListMenu>(); public render() { return ( <JqxListMenu ref={this.myListMenu} width={300} showNavigationArrows={false}> <ul data-role="listmenu"> <li>OSI <ul data-role="listmenu"> <li>Application Layer <ol data-role="listmenu"> <li>SIP </li> <li>DNS </li> </ol> </li> <li>Presentation Layer <ol data-role="listmenu"> <li>SSL </li> <li>TLS </li> </ol> </li> <li>Session Layer <ol data-role="listmenu"> <li>NetBIOS </li> <li>SPDY </li> </ol> </li> </ul> </li> <li>TCP/IP <ul data-role="listmenu"> <li>Application layer <ol data-role="listmenu"> <li>DHCP </li> <li>DNS </li> <li>FTP </li> </ol> </li> <li>Transport layer <ol data-role="listmenu"> <li>TCP </li> <li>UDP </li> <li>SCTP </li> </ol> </li> <li>Internet layer <ol data-role="listmenu"> <li>IP </li> <li>ICMP </li> <li>ECN </li> </ol> </li> </ul> </li> </ul> </JqxListMenu> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
showFilter
|
boolean
|
false
|
Sets or gets whether the filter input field is visible.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu'; class App extends React.PureComponent<{}, IListMenuProps> { private myListMenu = React.createRef<JqxListMenu>(); public render() { return ( <JqxListMenu ref={this.myListMenu} width={300} showFilter={true}> <ul data-role="listmenu"> <li>OSI <ul data-role="listmenu"> <li>Application Layer <ol data-role="listmenu"> <li>SIP </li> <li>DNS </li> </ol> </li> <li>Presentation Layer <ol data-role="listmenu"> <li>SSL </li> <li>TLS </li> </ol> </li> <li>Session Layer <ol data-role="listmenu"> <li>NetBIOS </li> <li>SPDY </li> </ol> </li> </ul> </li> <li>TCP/IP <ul data-role="listmenu"> <li>Application layer <ol data-role="listmenu"> <li>DHCP </li> <li>DNS </li> <li>FTP </li> </ol> </li> <li>Transport layer <ol data-role="listmenu"> <li>TCP </li> <li>UDP </li> <li>SCTP </li> </ol> </li> <li>Internet layer <ol data-role="listmenu"> <li>IP </li> <li>ICMP </li> <li>ECN </li> </ol> </li> </ul> </li> </ul> </JqxListMenu> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
showHeader
|
boolean
|
true
|
Sets or gets whether the header will be visible.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu'; class App extends React.PureComponent<{}, IListMenuProps> { private myListMenu = React.createRef<JqxListMenu>(); public render() { return ( <JqxListMenu ref={this.myListMenu} width={300} showHeader={false}> <ul data-role="listmenu"> <li>OSI <ul data-role="listmenu"> <li>Application Layer <ol data-role="listmenu"> <li>SIP </li> <li>DNS </li> </ol> </li> <li>Presentation Layer <ol data-role="listmenu"> <li>SSL </li> <li>TLS </li> </ol> </li> <li>Session Layer <ol data-role="listmenu"> <li>NetBIOS </li> <li>SPDY </li> </ol> </li> </ul> </li> <li>TCP/IP <ul data-role="listmenu"> <li>Application layer <ol data-role="listmenu"> <li>DHCP </li> <li>DNS </li> <li>FTP </li> </ol> </li> <li>Transport layer <ol data-role="listmenu"> <li>TCP </li> <li>UDP </li> <li>SCTP </li> </ol> </li> <li>Internet layer <ol data-role="listmenu"> <li>IP </li> <li>ICMP </li> <li>ECN </li> </ol> </li> </ul> </li> </ul> </JqxListMenu> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
showBackButton
|
boolean
|
true
|
Indicates whether the back button will be visible.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu'; class App extends React.PureComponent<{}, IListMenuProps> { private myListMenu = React.createRef<JqxListMenu>(); public render() { return ( <JqxListMenu ref={this.myListMenu} width={300} showBackButton={false}> <ul data-role="listmenu"> <li>OSI <ul data-role="listmenu"> <li>Application Layer <ol data-role="listmenu"> <li>SIP </li> <li>DNS </li> </ol> </li> <li>Presentation Layer <ol data-role="listmenu"> <li>SSL </li> <li>TLS </li> </ol> </li> <li>Session Layer <ol data-role="listmenu"> <li>NetBIOS </li> <li>SPDY </li> </ol> </li> </ul> </li> <li>TCP/IP <ul data-role="listmenu"> <li>Application layer <ol data-role="listmenu"> <li>DHCP </li> <li>DNS </li> <li>FTP </li> </ol> </li> <li>Transport layer <ol data-role="listmenu"> <li>TCP </li> <li>UDP </li> <li>SCTP </li> </ol> </li> <li>Internet layer <ol data-role="listmenu"> <li>IP </li> <li>ICMP </li> <li>ECN </li> </ol> </li> </ul> </li> </ul> </JqxListMenu> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
theme
|
string
|
''
|
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu'; class App extends React.PureComponent<{}, IListMenuProps> { private myListMenu = React.createRef<JqxListMenu>(); public render() { return ( <JqxListMenu ref={this.myListMenu} width={300} theme={ 'material'}> <ul data-role="listmenu"> <li>OSI <ul data-role="listmenu"> <li>Application Layer <ol data-role="listmenu"> <li>SIP </li> <li>DNS </li> </ol> </li> <li>Presentation Layer <ol data-role="listmenu"> <li>SSL </li> <li>TLS </li> </ol> </li> <li>Session Layer <ol data-role="listmenu"> <li>NetBIOS </li> <li>SPDY </li> </ol> </li> </ul> </li> <li>TCP/IP <ul data-role="listmenu"> <li>Application layer <ol data-role="listmenu"> <li>DHCP </li> <li>DNS </li> <li>FTP </li> </ol> </li> <li>Transport layer <ol data-role="listmenu"> <li>TCP </li> <li>UDP </li> <li>SCTP </li> </ol> </li> <li>Internet layer <ol data-role="listmenu"> <li>IP </li> <li>ICMP </li> <li>ECN </li> </ol> </li> </ul> </li> </ul> </JqxListMenu> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
width
|
string | number
|
100%
|
Sets or gets the jqxListMenu's width.
/* tslint:disable */import * as React from 'react';import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu'; class App extends React.PureComponent<{}, IListMenuProps> { private myListMenu = React.createRef<JqxListMenu>(); public render() { return ( <JqxListMenu ref={this.myListMenu} width={300}> <ul data-role="listmenu"> <li>OSI <ul data-role="listmenu"> <li>Application Layer <ol data-role="listmenu"> <li>SIP </li> <li>DNS </li> </ol> </li> <li>Presentation Layer <ol data-role="listmenu"> <li>SSL </li> <li>TLS </li> </ol> </li> <li>Session Layer <ol data-role="listmenu"> <li>NetBIOS </li> <li>SPDY </li> </ol> </li> </ul> </li> <li>TCP/IP <ul data-role="listmenu"> <li>Application layer <ol data-role="listmenu"> <li>DHCP </li> <li>DNS </li> <li>FTP </li> </ol> </li> <li>Transport layer <ol data-role="listmenu"> <li>TCP </li> <li>UDP </li> <li>SCTP </li> </ol> </li> <li>Internet layer <ol data-role="listmenu"> <li>IP </li> <li>ICMP </li> <li>ECN </li> </ol> </li> </ul> </li> </ul> </JqxListMenu> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
|
|
| Name | Arguments | Return Type |
|---|
|
back
|
None
|
|
Navigates to the previous page.
|
|
changePage
|
Item
|
|
Sets the displayed page. The page could be set using a selector or object. The page must be a child of the current list and it's data-role must be set to "listmenu".
|
|
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 JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu'; class App extends React.PureComponent<{}, IListMenuProps> { private myListMenu = React.createRef<JqxListMenu>(); public componentDidMount(): void { this.myListMenu.current!.destroy(); } public render() { return ( <JqxListMenu ref={this.myListMenu} width={300}> <ul data-role="listmenu"> <li>OSI <ul data-role="listmenu"> <li>Application Layer <ol data-role="listmenu"> <li>SIP </li> <li>DNS </li> </ol> </li> <li>Presentation Layer <ol data-role="listmenu"> <li>SSL </li> <li>TLS </li> </ol> </li> <li>Session Layer <ol data-role="listmenu"> <li>NetBIOS </li> <li>SPDY </li> </ol> </li> </ul> </li> <li>TCP/IP <ul data-role="listmenu"> <li>Application layer <ol data-role="listmenu"> <li>DHCP </li> <li>DNS </li> <li>FTP </li> </ol> </li> <li>Transport layer <ol data-role="listmenu"> <li>TCP </li> <li>UDP </li> <li>SCTP </li> </ol> </li> <li>Internet layer <ol data-role="listmenu"> <li>IP </li> <li>ICMP </li> <li>ECN </li> </ol> </li> </ul> </li> </ul> </JqxListMenu> ); } } ReactDOM.render( <App />, document.querySelector( '#app') as HTMLElement);
|
