Name | Type | Default |
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'));
|
|
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'));
|
|
Name | Return 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'));
|