| Name | Type | Default |
|---|
|
animationType
|
String
|
'fade'
|
Sets or gets the animationType property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { render() { return ( <JqxRibbon ref='myRibbon' width={800} animationType={ 'slide'}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
animationDelay
|
Number
|
400
|
Sets or gets the animationDelay property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { render() { return ( <JqxRibbon ref='myRibbon' width={800} animationType={ 'slide'} animationDelay={800}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } 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 JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { render() { return ( <JqxRibbon ref='myRibbon' width={800} animationType={ 'slide'} disabled={true}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
height
|
Number
|
100
|
Sets or gets the height property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { render() { return ( <JqxRibbon ref='myRibbon' width={800} animationType={ 'slide'} height={100}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
initContent
|
Function
|
null
|
Sets or gets the initContent property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { render() { return ( <JqxRibbon ref='myRibbon' width={800} animationType={ 'slide'} initContent={initContent}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
mode
|
String
|
'default'
|
Sets or gets the mode property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { render() { return ( <JqxRibbon ref='myRibbon' width={800} animationType={ 'slide'} mode={'popup'}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
popupCloseMode
|
String
|
'click'
|
Sets or gets the popupCloseMode property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { render() { return ( <JqxRibbon ref='myRibbon' width={800} animationType={ 'slide'} popupCloseMode={'mouseLeave'}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } 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 JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { render() { return ( <JqxRibbon ref='myRibbon' width={800} animationType={ 'slide'} position={'left'}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } 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 JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { render() { return ( <JqxRibbon ref='myRibbon' width={800} animationType={ 'slide'} rtl={true}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
selectedIndex
|
Number
|
0
|
Sets or gets the selectedIndex property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { render() { return ( <JqxRibbon ref='myRibbon' width={800} animationType={ 'slide'} selectedIndex={2}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
selectionMode
|
String
|
'click'
|
Sets or gets the selectionMode property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { render() { return ( <JqxRibbon ref='myRibbon' width={800} animationType={ 'slide'} selectionMode={'hover'}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
scrollPosition
|
String
|
'both'
|
Sets or gets the scrollPosition property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { render() { return ( <JqxRibbon ref='myRibbon' width={800} animationType={ 'slide'} scrollPosition={'near'}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
scrollStep
|
Number
|
10
|
Sets or gets the scrollStep property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { render() { return ( <JqxRibbon ref='myRibbon' width={800} animationType={ 'slide'} scrollStep={20}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
scrollDelay
|
Number
|
50
|
Sets or gets the scrollDelay property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { render() { return ( <JqxRibbon ref='myRibbon' width={800} animationType={ 'slide'} scrollDelay={100}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
theme
|
String
|
''
|
Sets or gets the theme property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { render() { return ( <JqxRibbon ref='myRibbon' width={800} animationType={ 'slide'} theme={'energyblue'}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
width
|
Number
|
null
|
Sets or gets the width property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { render() { return ( <JqxRibbon ref='myRibbon' width={800} animationType={ 'slide'}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
|
|
change
|
Event
|
|
This event is triggered when the user selects or unselects an item.
Code examples
Bind to the change event of jqxRibbon.
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { componentDidMount() { this.refs.myRibbon.on('change', (event) => { // Do Something... }); } render() { return ( <JqxRibbon ref= 'myRibbon' width={800} animationType={ 'slide'}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
reorder
|
Event
|
|
This event is triggered when the user reorders the jqxRibbon items with the mouse.
Code examples
Bind to the reorder event of jqxRibbon.
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { componentDidMount() { this.refs.myRibbon.on('reorder', (event) => { // Do Something... }); } render() { return ( <JqxRibbon ref= 'myRibbon' width={800} animationType={ 'slide'}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
select
|
Event
|
|
This event is triggered when the user selects an item.
Code examples
Bind to the select event of jqxRibbon.
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { componentDidMount() { this.refs.myRibbon.on('select', (event) => { // Do Something... }); } render() { return ( <JqxRibbon ref= 'myRibbon' width={800} animationType={ 'slide'}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
unselect
|
Event
|
|
This event is triggered when the user unselects an item.
Code examples
Bind to the unselect event of jqxRibbon.
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { componentDidMount() { this.refs.myRibbon.on('unselect', (event) => { // Do Something... }); } render() { return ( <JqxRibbon ref= 'myRibbon' width={800} animationType={ 'slide'}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
|
| Name | Return Type |
|---|
|
addAt
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { componentDidMount() { this.refs.myRibbon.addAt(0); } render() { return ( <JqxRibbon ref= 'myRibbon' width={800} animationType={ 'slide'}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
clearSelection
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { componentDidMount() { this.refs.myRibbon.clearSelection(); } render() { return ( <JqxRibbon ref= 'myRibbon' width={800} animationType={ 'slide'}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
disableAt
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { componentDidMount() { this.refs.myRibbon.disableAt(0); } render() { return ( <JqxRibbon ref= 'myRibbon' width={800} animationType={ 'slide'}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
destroy
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { componentDidMount() { this.refs.myRibbon.destroy(); } render() { return ( <JqxRibbon ref= 'myRibbon' width={800} animationType={ 'slide'}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
enableAt
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { componentDidMount() { this.refs.myRibbon.enableAt(0); } render() { return ( <JqxRibbon ref= 'myRibbon' width={800} animationType={ 'slide'}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
hideAt
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { componentDidMount() { this.refs.myRibbon.hideAt(0); } render() { return ( <JqxRibbon ref= 'myRibbon' width={800} animationType={ 'slide'}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
removeAt
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { componentDidMount() { this.refs.myRibbon.removeAt(0); } render() { return ( <JqxRibbon ref= 'myRibbon' width={800} animationType={ 'slide'}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
render
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { componentDidMount() { this.refs.myRibbon.render(); } render() { return ( <JqxRibbon ref= 'myRibbon' width={800} animationType={ 'slide'}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
refresh
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { componentDidMount() { this.refs.myRibbon.refresh(); } render() { return ( <JqxRibbon ref= 'myRibbon' width={800} animationType={ 'slide'}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
selectAt
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { componentDidMount() { this.refs.myRibbon.selectAt(0); } render() { return ( <JqxRibbon ref= 'myRibbon' width={800} animationType={ 'slide'}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
showAt
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { componentDidMount() { this.refs.myRibbon.showAt(0); } render() { return ( <JqxRibbon ref= 'myRibbon' width={800} animationType={ 'slide'}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
setPopupLayout
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { componentDidMount() { this.refs.myRibbon.setPopupLayout(20,'left',200,400); } render() { return ( <JqxRibbon ref= 'myRibbon' width={800} animationType={ 'slide'}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
updateAt
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { componentDidMount() { this.refs.myRibbon.updateAt(1,Item1); } render() { return ( <JqxRibbon ref= 'myRibbon' width={800} animationType={ 'slide'}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
val
|
String
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxRibbon from 'jqwidgets-react/react_jqxribbon.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myRibbon.val(); } render() { return ( <JqxRibbon ref= 'myRibbon' width={800} animationType={ 'slide'}> <ul> <li style={{ marginLeft: 30 }}>Node.js </li> <li style={{ marginLeft: 30 }}>JavaServer Pages </li> <li style={{ marginLeft: 30 }}>Active Server Pages </li> </ul> <div> <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 serve... </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft... </div> </div> </JqxRibbon> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|