Properties

NameTypeDefault
animationType String none

Sets or gets the animationType property.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'} animationType={'fade'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
autoHeight Boolean true

Sets or gets the autoHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'} autoHeight={true}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
closeButtonSize Number 16

Sets or gets the closeButtonSize property.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'} closeButtonSize={20}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
collapsible Boolean false

Sets or gets the collapsible property.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'} collapsible={true}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
contentTransitionDuration Number 450

Sets or gets the contentTransitionDuration property.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'} contentTransitionDuration={300}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
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 JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'} disabled={true}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
enabledHover Boolean true

Sets or gets the enabledHover property.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'} enabledHover={true}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
enableScrollAnimation Boolean true

Sets or gets the enableScrollAnimation property.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'} enableScrollAnimation={true}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
enableDropAnimation Boolean false

Sets or gets the enableDropAnimation property.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'} enableScrollAnimation={true}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
height Number auto

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
initTabContent function null

Sets or gets the initTabContent property.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'} initTabContent={initTabContent}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
keyboardNavigation Boolean true

Sets or gets the keyboardNavigation property.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'} keyboardNavigation={false}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
next Object null

Sets or gets the next property.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'} next={next}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
previous Object null

Sets or gets the previous property.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'} previous={previous}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
position String top

Sets or gets the position property.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
reorder Boolean false

Sets or gets the reorder property.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'} reorder={true}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
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 JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'} rtl={true}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
scrollAnimationDuration Number 250

Sets or gets the scrollAnimationDuration property.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'} scrollAnimationDuration={3000}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
selectedItem Number 0

Sets or gets the selectedItem property.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'} selectedItem={1}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
selectionTracker Boolean false

Sets or gets the selectionTracker property.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'} selectionTracker={true}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
scrollable Boolean true

Sets or gets the scrollable property.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'} scrollable={true}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
scrollPosition String 'right'

Sets or gets the scrollPosition property.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'} scrollPosition={'both'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
scrollStep Number 70

Sets or gets the scrollStep property.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'} scrollStep={100}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
showCloseButtons Boolean false

Sets or gets the showCloseButtons property.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'} showCloseButtons={true}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
toggleMode String click

Sets or gets the toggleMode property.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'} toggleMode={'dlclick'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
theme String ''

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'} theme={'energyblue'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
width Number | String auto

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

Events

add Event

This event is triggered when a new tab is added to the jqxTabs.

Code examples

Bind to the add event of jqxTabs.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.on('add', (event) => {
// Do Something...
});
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

created Event

This event is triggered when the jqxTabs is created. You should subscribe to this event before the jqxTabs initialization.

Code examples

Bind to the created event of jqxTabs.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.on('created', (event) => {
// Do Something...
});
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

collapsed Event

Theis event is triggered when any tab is collapsed.

Code examples

Bind to the collapsed event of jqxTabs.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.on('collapsed', (event) => {
// Do Something...
});
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

dragStart Event

This event is triggered when the drag operation started.

Code examples

Bind to the dragStart event of jqxTabs.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.on('dragStart', (event) => {
// Do Something...
});
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

dragEnd Event

This event is triggered when the drag operation ended.

Code examples

Bind to the dragEnd event of jqxTabs.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.on('dragEnd', (event) => {
// Do Something...
});
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

expanded Event

This event is triggered when any tab is expanded.

Code examples

Bind to the expanded event of jqxTabs.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.on('expanded', (event) => {
// Do Something...
});
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

removed Event

This event is triggered when a tab is removed.

Code examples

Bind to the removed event of jqxTabs.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.on('removed', (event) => {
// Do Something...
});
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

selecting Event

This event is triggered when the user selects a tab. This event is cancelable. You can cancel the selection by setting the 'event.cancel = true' in the event callback.

Code examples

Bind to the selecting event of jqxTabs.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.on('selecting', (event) => {
// Do Something...
});
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

selected Event

This event is triggered when the user selects a new tab.

Code examples

Bind to the selected event of jqxTabs.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.on('selected', (event) => {
// Do Something...
});
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

tabclick Event

This event is triggered when the user click a tab. You can retrieve the clicked tab's index.

Code examples

Bind to the tabclick event of jqxTabs.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.on('tabclick', (event) => {
// Do Something...
});
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

unselecting Event

This event is triggered when the user selects a tab. The last selected tab is going to become unselected. This event is cancelable. You can cancel the selection by setting the 'event.cancel = true' in the event callback.

Code examples

Bind to the unselecting event of jqxTabs.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.on('unselecting', (event) => {
// Do Something...
});
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

unselected Event

This event is triggered when the user selects a tab. The last selected tab becomes unselected.

Code examples

Bind to the unselected event of jqxTabs.

import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.on('unselected', (event) => {
// Do Something...
});
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

Methods

NameReturn Type
addAt None
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.addAt(1,'Title','Content');
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

addFirst None
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.addFirst();
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

addLast None
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.addLast();
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

collapse None
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.collapse();
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

disable None
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.disable();
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

disableAt None
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.disableAt(1);
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

destroy None
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.destroy();
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

ensureVisible None
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.ensureVisible(1);
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

enableAt None
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.enableAt(1);
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

expand None
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.expand();
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

enable None
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.enable();
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

focus None
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.focus();
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

getTitleAt String
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
let value = this.refs.myTabs.getTitleAt(1);
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

getContentAt Object
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
let value = this.refs.myTabs.getContentAt(1);
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

getDisabledTabsCount Object
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
let value = this.refs.myTabs.getDisabledTabsCount();
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

hideCloseButtonAt None
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.hideCloseButtonAt(1);
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

hideAllCloseButtons None
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.hideAllCloseButtons();
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

length Number
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
let value = this.refs.myTabs.length();
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

removeAt None
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.removeAt(1);
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

removeFirst None
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.removeFirst();
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

removeLast None
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.removeLast();
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

select None
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.select(1);
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

setContentAt None
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.setContentAt(1,document.createElement('label'));
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

setTitleAt None
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.setTitleAt(1,'Title 1');
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

showCloseButtonAt None
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.showCloseButtonAt(1);
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

showAllCloseButtons None
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
this.refs.myTabs.showAllCloseButtons();
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

val String
import React from 'react';
import ReactDOM from 'react-dom';
import JqxTabs from 'jqwidgets-react/react_jqxtabs.js';
class App extends React.Component {
componentDidMount() {
let value = this.refs.myTabs.val();
}

render() {
return (
<JqxTabs ref='myTabs'
width={'90%'} height={200} position={'top'}>
<ul>
<li style={{ marginLeft: 30 }}>Node.js</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>Node.js is an event-driven I/O server-side JavaScript environment based on V8....</div>
<div>JavaServer Pages (JSP) is a Java technology that helps software developers....</div>
<div>ASP.NET is a web application framework developed and marketed by Microsoft....</div>
<div>Python is a general-purpose, high-level programming language[5] whose design....</div>
<div>Perl is a high-level, general-purpose, interpreted, dynamic programming language....</div>
</JqxTabs>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));