| Name | Type | Default |
|---|
|
disabled
|
Boolean
|
false
|
Sets or gets the disabled property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxToolBar from 'jqwidgets-react/react_jqxtoolbar.js'; class App extends React.Component { render() { let tools = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom'; let initTools = (type, index, tool, menuToolIninitialization) => { let icon = document.createElement( 'div'); if (type == "toggleButton") { icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon '; } switch (index) { case 0: icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic"; icon.setAttribute( "title", "Bold"); tool[0].appendChild(icon); break; case 1: icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic"; icon.setAttribute( "title", "Italic"); tool[0].appendChild(icon); break; case 2: icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic"; icon.setAttribute( "title", "Underline"); tool[0].appendChild(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", () => { let toggled = tool.jqxToggleButton( "toggled"); if (toggled) { tool.text( "Enabled"); } else { tool.text( "Disabled"); } }); break; case 4: tool.jqxDropDownList({ width: 130, source: [ "<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 }); break; case 5: tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 6: tool.jqxInput({ width: 200, placeHolder: "Type here to search..." }); break; case 7: let button = document.createElement( 'div'); let img = document.createElement( 'img'); img.src = '../images/administrator.png' img.title = 'Custom tool'; button.appendChild(img); tool[0].appendChild(button); tool.jqxButton({ height: 15 }); break; } }; return ( <JqxToolBar ref= 'myToolBar' width={700} height={35} tools={tools} initTools={initTools} disabled={true} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
height
|
Number
|
35
|
Sets or gets the height property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxToolBar from 'jqwidgets-react/react_jqxtoolbar.js'; class App extends React.Component { render() { let tools = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom'; let initTools = (type, index, tool, menuToolIninitialization) => { let icon = document.createElement( 'div'); if (type == "toggleButton") { icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon '; } switch (index) { case 0: icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic"; icon.setAttribute( "title", "Bold"); tool[0].appendChild(icon); break; case 1: icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic"; icon.setAttribute( "title", "Italic"); tool[0].appendChild(icon); break; case 2: icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic"; icon.setAttribute( "title", "Underline"); tool[0].appendChild(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", () => { let toggled = tool.jqxToggleButton( "toggled"); if (toggled) { tool.text( "Enabled"); } else { tool.text( "Disabled"); } }); break; case 4: tool.jqxDropDownList({ width: 130, source: [ "<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 }); break; case 5: tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 6: tool.jqxInput({ width: 200, placeHolder: "Type here to search..." }); break; case 7: let button = document.createElement( 'div'); let img = document.createElement( 'img'); img.src = '../images/administrator.png' img.title = 'Custom tool'; button.appendChild(img); tool[0].appendChild(button); tool.jqxButton({ height: 15 }); break; } }; return ( <JqxToolBar ref= 'myToolBar' width={700} height={35} tools={tools} initTools={initTools} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
initTools
|
function
|
null
|
Sets or gets the initTools property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxToolBar from 'jqwidgets-react/react_jqxtoolbar.js'; class App extends React.Component { render() { let tools = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom'; let initTools = (type, index, tool, menuToolIninitialization) => { let icon = document.createElement( 'div'); if (type == "toggleButton") { icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon '; } switch (index) { case 0: icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic"; icon.setAttribute( "title", "Bold"); tool[0].appendChild(icon); break; case 1: icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic"; icon.setAttribute( "title", "Italic"); tool[0].appendChild(icon); break; case 2: icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic"; icon.setAttribute( "title", "Underline"); tool[0].appendChild(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", () => { let toggled = tool.jqxToggleButton( "toggled"); if (toggled) { tool.text( "Enabled"); } else { tool.text( "Disabled"); } }); break; case 4: tool.jqxDropDownList({ width: 130, source: [ "<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 }); break; case 5: tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 6: tool.jqxInput({ width: 200, placeHolder: "Type here to search..." }); break; case 7: let button = document.createElement( 'div'); let img = document.createElement( 'img'); img.src = '../images/administrator.png' img.title = 'Custom tool'; button.appendChild(img); tool[0].appendChild(button); tool.jqxButton({ height: 15 }); break; } }; return ( <JqxToolBar ref= 'myToolBar' width={700} height={35} tools={tools} initTools={initTools} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
minimizeWidth
|
Number
|
200
|
Sets or gets the minimizeWidth property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxToolBar from 'jqwidgets-react/react_jqxtoolbar.js'; class App extends React.Component { render() { let tools = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom'; let initTools = (type, index, tool, menuToolIninitialization) => { let icon = document.createElement( 'div'); if (type == "toggleButton") { icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon '; } switch (index) { case 0: icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic"; icon.setAttribute( "title", "Bold"); tool[0].appendChild(icon); break; case 1: icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic"; icon.setAttribute( "title", "Italic"); tool[0].appendChild(icon); break; case 2: icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic"; icon.setAttribute( "title", "Underline"); tool[0].appendChild(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", () => { let toggled = tool.jqxToggleButton( "toggled"); if (toggled) { tool.text( "Enabled"); } else { tool.text( "Disabled"); } }); break; case 4: tool.jqxDropDownList({ width: 130, source: [ "<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 }); break; case 5: tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 6: tool.jqxInput({ width: 200, placeHolder: "Type here to search..." }); break; case 7: let button = document.createElement( 'div'); let img = document.createElement( 'img'); img.src = '../images/administrator.png' img.title = 'Custom tool'; button.appendChild(img); tool[0].appendChild(button); tool.jqxButton({ height: 15 }); break; } }; return ( <JqxToolBar ref= 'myToolBar' width={700} height={35} tools={tools} initTools={initTools} minimizeWidth={250} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
minWidth
|
Number
|
null
|
Sets or gets the minWidth property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxToolBar from 'jqwidgets-react/react_jqxtoolbar.js'; class App extends React.Component { render() { let tools = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom'; let initTools = (type, index, tool, menuToolIninitialization) => { let icon = document.createElement( 'div'); if (type == "toggleButton") { icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon '; } switch (index) { case 0: icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic"; icon.setAttribute( "title", "Bold"); tool[0].appendChild(icon); break; case 1: icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic"; icon.setAttribute( "title", "Italic"); tool[0].appendChild(icon); break; case 2: icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic"; icon.setAttribute( "title", "Underline"); tool[0].appendChild(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", () => { let toggled = tool.jqxToggleButton( "toggled"); if (toggled) { tool.text( "Enabled"); } else { tool.text( "Disabled"); } }); break; case 4: tool.jqxDropDownList({ width: 130, source: [ "<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 }); break; case 5: tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 6: tool.jqxInput({ width: 200, placeHolder: "Type here to search..." }); break; case 7: let button = document.createElement( 'div'); let img = document.createElement( 'img'); img.src = '../images/administrator.png' img.title = 'Custom tool'; button.appendChild(img); tool[0].appendChild(button); tool.jqxButton({ height: 15 }); break; } }; return ( <JqxToolBar ref= 'myToolBar' width={700} height={35} tools={tools} initTools={initTools} minWidth={300} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
maxWidth
|
Number
|
null
|
Sets or gets the maxWidth property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxToolBar from 'jqwidgets-react/react_jqxtoolbar.js'; class App extends React.Component { render() { let tools = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom'; let initTools = (type, index, tool, menuToolIninitialization) => { let icon = document.createElement( 'div'); if (type == "toggleButton") { icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon '; } switch (index) { case 0: icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic"; icon.setAttribute( "title", "Bold"); tool[0].appendChild(icon); break; case 1: icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic"; icon.setAttribute( "title", "Italic"); tool[0].appendChild(icon); break; case 2: icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic"; icon.setAttribute( "title", "Underline"); tool[0].appendChild(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", () => { let toggled = tool.jqxToggleButton( "toggled"); if (toggled) { tool.text( "Enabled"); } else { tool.text( "Disabled"); } }); break; case 4: tool.jqxDropDownList({ width: 130, source: [ "<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 }); break; case 5: tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 6: tool.jqxInput({ width: 200, placeHolder: "Type here to search..." }); break; case 7: let button = document.createElement( 'div'); let img = document.createElement( 'img'); img.src = '../images/administrator.png' img.title = 'Custom tool'; button.appendChild(img); tool[0].appendChild(button); tool.jqxButton({ height: 15 }); break; } }; return ( <JqxToolBar ref= 'myToolBar' width={700} height={35} tools={tools} initTools={initTools} maxWidth={1200} /> ) } } 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 JqxToolBar from 'jqwidgets-react/react_jqxtoolbar.js'; class App extends React.Component { render() { let tools = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom'; let initTools = (type, index, tool, menuToolIninitialization) => { let icon = document.createElement( 'div'); if (type == "toggleButton") { icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon '; } switch (index) { case 0: icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic"; icon.setAttribute( "title", "Bold"); tool[0].appendChild(icon); break; case 1: icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic"; icon.setAttribute( "title", "Italic"); tool[0].appendChild(icon); break; case 2: icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic"; icon.setAttribute( "title", "Underline"); tool[0].appendChild(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", () => { let toggled = tool.jqxToggleButton( "toggled"); if (toggled) { tool.text( "Enabled"); } else { tool.text( "Disabled"); } }); break; case 4: tool.jqxDropDownList({ width: 130, source: [ "<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 }); break; case 5: tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 6: tool.jqxInput({ width: 200, placeHolder: "Type here to search..." }); break; case 7: let button = document.createElement( 'div'); let img = document.createElement( 'img'); img.src = '../images/administrator.png' img.title = 'Custom tool'; button.appendChild(img); tool[0].appendChild(button); tool.jqxButton({ height: 15 }); break; } }; return ( <JqxToolBar ref= 'myToolBar' width={700} height={35} tools={tools} initTools={initTools} rtl={true} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
tools
|
String
|
''
|
Sets or gets the tools property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxToolBar from 'jqwidgets-react/react_jqxtoolbar.js'; class App extends React.Component { render() { let tools = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom'; let initTools = (type, index, tool, menuToolIninitialization) => { let icon = document.createElement( 'div'); if (type == "toggleButton") { icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon '; } switch (index) { case 0: icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic"; icon.setAttribute( "title", "Bold"); tool[0].appendChild(icon); break; case 1: icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic"; icon.setAttribute( "title", "Italic"); tool[0].appendChild(icon); break; case 2: icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic"; icon.setAttribute( "title", "Underline"); tool[0].appendChild(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", () => { let toggled = tool.jqxToggleButton( "toggled"); if (toggled) { tool.text( "Enabled"); } else { tool.text( "Disabled"); } }); break; case 4: tool.jqxDropDownList({ width: 130, source: [ "<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 }); break; case 5: tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 6: tool.jqxInput({ width: 200, placeHolder: "Type here to search..." }); break; case 7: let button = document.createElement( 'div'); let img = document.createElement( 'img'); img.src = '../images/administrator.png' img.title = 'Custom tool'; button.appendChild(img); tool[0].appendChild(button); tool.jqxButton({ height: 15 }); break; } }; return ( <JqxToolBar ref= 'myToolBar' width={700} height={35} tools={tools} initTools={initTools} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
theme
|
String
|
''
|
Sets or gets the theme property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxToolBar from 'jqwidgets-react/react_jqxtoolbar.js'; class App extends React.Component { render() { let tools = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom'; let initTools = (type, index, tool, menuToolIninitialization) => { let icon = document.createElement( 'div'); if (type == "toggleButton") { icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon '; } switch (index) { case 0: icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic"; icon.setAttribute( "title", "Bold"); tool[0].appendChild(icon); break; case 1: icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic"; icon.setAttribute( "title", "Italic"); tool[0].appendChild(icon); break; case 2: icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic"; icon.setAttribute( "title", "Underline"); tool[0].appendChild(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", () => { let toggled = tool.jqxToggleButton( "toggled"); if (toggled) { tool.text( "Enabled"); } else { tool.text( "Disabled"); } }); break; case 4: tool.jqxDropDownList({ width: 130, source: [ "<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 }); break; case 5: tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 6: tool.jqxInput({ width: 200, placeHolder: "Type here to search..." }); break; case 7: let button = document.createElement( 'div'); let img = document.createElement( 'img'); img.src = '../images/administrator.png' img.title = 'Custom tool'; button.appendChild(img); tool[0].appendChild(button); tool.jqxButton({ height: 15 }); break; } }; return ( <JqxToolBar ref= 'myToolBar' width={700} height={35} tools={tools} initTools={initTools} theme={ 'energyblue'} /> ) } } 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 JqxToolBar from 'jqwidgets-react/react_jqxtoolbar.js'; class App extends React.Component { render() { let tools = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom'; let initTools = (type, index, tool, menuToolIninitialization) => { let icon = document.createElement( 'div'); if (type == "toggleButton") { icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon '; } switch (index) { case 0: icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic"; icon.setAttribute( "title", "Bold"); tool[0].appendChild(icon); break; case 1: icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic"; icon.setAttribute( "title", "Italic"); tool[0].appendChild(icon); break; case 2: icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic"; icon.setAttribute( "title", "Underline"); tool[0].appendChild(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", () => { let toggled = tool.jqxToggleButton( "toggled"); if (toggled) { tool.text( "Enabled"); } else { tool.text( "Disabled"); } }); break; case 4: tool.jqxDropDownList({ width: 130, source: [ "<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 }); break; case 5: tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 6: tool.jqxInput({ width: 200, placeHolder: "Type here to search..." }); break; case 7: let button = document.createElement( 'div'); let img = document.createElement( 'img'); img.src = '../images/administrator.png' img.title = 'Custom tool'; button.appendChild(img); tool[0].appendChild(button); tool.jqxButton({ height: 15 }); break; } }; return ( <JqxToolBar ref= 'myToolBar' width={700} height={35} tools={tools} initTools={initTools} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
|
|
close
|
Event
|
|
This event is triggered when the minimize pop-up menu is closed.
Code examples
Bind to the close event of jqxToolBar.
import React from 'react';import ReactDOM from 'react-dom'; import JqxToolBar from 'jqwidgets-react/react_jqxtoolbar.js'; class App extends React.Component { componentDidMount() { this.refs.myToolBar.on('close', (event) => { // Do Something... }); } render() { let tools = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom'; let initTools = (type, index, tool, menuToolIninitialization) => { let icon = document.createElement( 'div'); if (type == "toggleButton") { icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon '; } switch (index) { case 0: icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic"; icon.setAttribute( "title", "Bold"); tool[0].appendChild(icon); break; case 1: icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic"; icon.setAttribute( "title", "Italic"); tool[0].appendChild(icon); break; case 2: icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic"; icon.setAttribute( "title", "Underline"); tool[0].appendChild(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", () => { let toggled = tool.jqxToggleButton( "toggled"); if (toggled) { tool.text( "Enabled"); } else { tool.text( "Disabled"); } }); break; case 4: tool.jqxDropDownList({ width: 130, source: [ "<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 }); break; case 5: tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 6: tool.jqxInput({ width: 200, placeHolder: "Type here to search..." }); break; case 7: let button = document.createElement( 'div'); let img = document.createElement( 'img'); img.src = '../images/administrator.png' img.title = 'Custom tool'; button.appendChild(img); tool[0].appendChild(button); tool.jqxButton({ height: 15 }); break; } }; return ( <JqxToolBar ref= 'myToolBar' width={700} height={35} tools={tools} initTools={initTools} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
open
|
Event
|
|
This event is triggered when the minimize pop-up menu is opened.
Code examples
Bind to the open event of jqxToolBar.
import React from 'react';import ReactDOM from 'react-dom'; import JqxToolBar from 'jqwidgets-react/react_jqxtoolbar.js'; class App extends React.Component { componentDidMount() { this.refs.myToolBar.on('open', (event) => { // Do Something... }); } render() { let tools = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom'; let initTools = (type, index, tool, menuToolIninitialization) => { let icon = document.createElement( 'div'); if (type == "toggleButton") { icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon '; } switch (index) { case 0: icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic"; icon.setAttribute( "title", "Bold"); tool[0].appendChild(icon); break; case 1: icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic"; icon.setAttribute( "title", "Italic"); tool[0].appendChild(icon); break; case 2: icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic"; icon.setAttribute( "title", "Underline"); tool[0].appendChild(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", () => { let toggled = tool.jqxToggleButton( "toggled"); if (toggled) { tool.text( "Enabled"); } else { tool.text( "Disabled"); } }); break; case 4: tool.jqxDropDownList({ width: 130, source: [ "<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 }); break; case 5: tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 6: tool.jqxInput({ width: 200, placeHolder: "Type here to search..." }); break; case 7: let button = document.createElement( 'div'); let img = document.createElement( 'img'); img.src = '../images/administrator.png' img.title = 'Custom tool'; button.appendChild(img); tool[0].appendChild(button); tool.jqxButton({ height: 15 }); break; } }; return ( <JqxToolBar ref= 'myToolBar' width={700} height={35} tools={tools} initTools={initTools} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
|
| Name | Return Type |
|---|
|
addTool
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxToolBar from 'jqwidgets-react/react_jqxtoolbar.js'; class App extends React.Component { componentDidMount() { this.refs.myToolBar.addTool('button','first','',null); } render() { let tools = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom'; let initTools = (type, index, tool, menuToolIninitialization) => { let icon = document.createElement( 'div'); if (type == "toggleButton") { icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon '; } switch (index) { case 0: icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic"; icon.setAttribute( "title", "Bold"); tool[0].appendChild(icon); break; case 1: icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic"; icon.setAttribute( "title", "Italic"); tool[0].appendChild(icon); break; case 2: icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic"; icon.setAttribute( "title", "Underline"); tool[0].appendChild(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", () => { let toggled = tool.jqxToggleButton( "toggled"); if (toggled) { tool.text( "Enabled"); } else { tool.text( "Disabled"); } }); break; case 4: tool.jqxDropDownList({ width: 130, source: [ "<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 }); break; case 5: tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 6: tool.jqxInput({ width: 200, placeHolder: "Type here to search..." }); break; case 7: let button = document.createElement( 'div'); let img = document.createElement( 'img'); img.src = '../images/administrator.png' img.title = 'Custom tool'; button.appendChild(img); tool[0].appendChild(button); tool.jqxButton({ height: 15 }); break; } }; return ( <JqxToolBar ref= 'myToolBar' width={700} height={35} tools={tools} initTools={initTools} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
disableTool
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxToolBar from 'jqwidgets-react/react_jqxtoolbar.js'; class App extends React.Component { componentDidMount() { this.refs.myToolBar.disableTool(1,true); } render() { let tools = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom'; let initTools = (type, index, tool, menuToolIninitialization) => { let icon = document.createElement( 'div'); if (type == "toggleButton") { icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon '; } switch (index) { case 0: icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic"; icon.setAttribute( "title", "Bold"); tool[0].appendChild(icon); break; case 1: icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic"; icon.setAttribute( "title", "Italic"); tool[0].appendChild(icon); break; case 2: icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic"; icon.setAttribute( "title", "Underline"); tool[0].appendChild(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", () => { let toggled = tool.jqxToggleButton( "toggled"); if (toggled) { tool.text( "Enabled"); } else { tool.text( "Disabled"); } }); break; case 4: tool.jqxDropDownList({ width: 130, source: [ "<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 }); break; case 5: tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 6: tool.jqxInput({ width: 200, placeHolder: "Type here to search..." }); break; case 7: let button = document.createElement( 'div'); let img = document.createElement( 'img'); img.src = '../images/administrator.png' img.title = 'Custom tool'; button.appendChild(img); tool[0].appendChild(button); tool.jqxButton({ height: 15 }); break; } }; return ( <JqxToolBar ref= 'myToolBar' width={700} height={35} tools={tools} initTools={initTools} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
destroy
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxToolBar from 'jqwidgets-react/react_jqxtoolbar.js'; class App extends React.Component { componentDidMount() { this.refs.myToolBar.destroy(); } render() { let tools = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom'; let initTools = (type, index, tool, menuToolIninitialization) => { let icon = document.createElement( 'div'); if (type == "toggleButton") { icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon '; } switch (index) { case 0: icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic"; icon.setAttribute( "title", "Bold"); tool[0].appendChild(icon); break; case 1: icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic"; icon.setAttribute( "title", "Italic"); tool[0].appendChild(icon); break; case 2: icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic"; icon.setAttribute( "title", "Underline"); tool[0].appendChild(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", () => { let toggled = tool.jqxToggleButton( "toggled"); if (toggled) { tool.text( "Enabled"); } else { tool.text( "Disabled"); } }); break; case 4: tool.jqxDropDownList({ width: 130, source: [ "<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 }); break; case 5: tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 6: tool.jqxInput({ width: 200, placeHolder: "Type here to search..." }); break; case 7: let button = document.createElement( 'div'); let img = document.createElement( 'img'); img.src = '../images/administrator.png' img.title = 'Custom tool'; button.appendChild(img); tool[0].appendChild(button); tool.jqxButton({ height: 15 }); break; } }; return ( <JqxToolBar ref= 'myToolBar' width={700} height={35} tools={tools} initTools={initTools} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
destroyTool
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxToolBar from 'jqwidgets-react/react_jqxtoolbar.js'; class App extends React.Component { componentDidMount() { this.refs.myToolBar.destroyTool(1); } render() { let tools = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom'; let initTools = (type, index, tool, menuToolIninitialization) => { let icon = document.createElement( 'div'); if (type == "toggleButton") { icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon '; } switch (index) { case 0: icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic"; icon.setAttribute( "title", "Bold"); tool[0].appendChild(icon); break; case 1: icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic"; icon.setAttribute( "title", "Italic"); tool[0].appendChild(icon); break; case 2: icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic"; icon.setAttribute( "title", "Underline"); tool[0].appendChild(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", () => { let toggled = tool.jqxToggleButton( "toggled"); if (toggled) { tool.text( "Enabled"); } else { tool.text( "Disabled"); } }); break; case 4: tool.jqxDropDownList({ width: 130, source: [ "<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 }); break; case 5: tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 6: tool.jqxInput({ width: 200, placeHolder: "Type here to search..." }); break; case 7: let button = document.createElement( 'div'); let img = document.createElement( 'img'); img.src = '../images/administrator.png' img.title = 'Custom tool'; button.appendChild(img); tool[0].appendChild(button); tool.jqxButton({ height: 15 }); break; } }; return ( <JqxToolBar ref= 'myToolBar' width={700} height={35} tools={tools} initTools={initTools} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
getTools
|
Array
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxToolBar from 'jqwidgets-react/react_jqxtoolbar.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myToolBar.getTools(); } render() { let tools = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom'; let initTools = (type, index, tool, menuToolIninitialization) => { let icon = document.createElement( 'div'); if (type == "toggleButton") { icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon '; } switch (index) { case 0: icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic"; icon.setAttribute( "title", "Bold"); tool[0].appendChild(icon); break; case 1: icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic"; icon.setAttribute( "title", "Italic"); tool[0].appendChild(icon); break; case 2: icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic"; icon.setAttribute( "title", "Underline"); tool[0].appendChild(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", () => { let toggled = tool.jqxToggleButton( "toggled"); if (toggled) { tool.text( "Enabled"); } else { tool.text( "Disabled"); } }); break; case 4: tool.jqxDropDownList({ width: 130, source: [ "<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 }); break; case 5: tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 6: tool.jqxInput({ width: 200, placeHolder: "Type here to search..." }); break; case 7: let button = document.createElement( 'div'); let img = document.createElement( 'img'); img.src = '../images/administrator.png' img.title = 'Custom tool'; button.appendChild(img); tool[0].appendChild(button); tool.jqxButton({ height: 15 }); break; } }; return ( <JqxToolBar ref= 'myToolBar' width={700} height={35} tools={tools} initTools={initTools} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
render
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxToolBar from 'jqwidgets-react/react_jqxtoolbar.js'; class App extends React.Component { componentDidMount() { this.refs.myToolBar.render(); } render() { let tools = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom'; let initTools = (type, index, tool, menuToolIninitialization) => { let icon = document.createElement( 'div'); if (type == "toggleButton") { icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon '; } switch (index) { case 0: icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic"; icon.setAttribute( "title", "Bold"); tool[0].appendChild(icon); break; case 1: icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic"; icon.setAttribute( "title", "Italic"); tool[0].appendChild(icon); break; case 2: icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic"; icon.setAttribute( "title", "Underline"); tool[0].appendChild(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", () => { let toggled = tool.jqxToggleButton( "toggled"); if (toggled) { tool.text( "Enabled"); } else { tool.text( "Disabled"); } }); break; case 4: tool.jqxDropDownList({ width: 130, source: [ "<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 }); break; case 5: tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 6: tool.jqxInput({ width: 200, placeHolder: "Type here to search..." }); break; case 7: let button = document.createElement( 'div'); let img = document.createElement( 'img'); img.src = '../images/administrator.png' img.title = 'Custom tool'; button.appendChild(img); tool[0].appendChild(button); tool.jqxButton({ height: 15 }); break; } }; return ( <JqxToolBar ref= 'myToolBar' width={700} height={35} tools={tools} initTools={initTools} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
refresh
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxToolBar from 'jqwidgets-react/react_jqxtoolbar.js'; class App extends React.Component { componentDidMount() { this.refs.myToolBar.refresh(); } render() { let tools = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom'; let initTools = (type, index, tool, menuToolIninitialization) => { let icon = document.createElement( 'div'); if (type == "toggleButton") { icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon '; } switch (index) { case 0: icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic"; icon.setAttribute( "title", "Bold"); tool[0].appendChild(icon); break; case 1: icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic"; icon.setAttribute( "title", "Italic"); tool[0].appendChild(icon); break; case 2: icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic"; icon.setAttribute( "title", "Underline"); tool[0].appendChild(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", () => { let toggled = tool.jqxToggleButton( "toggled"); if (toggled) { tool.text( "Enabled"); } else { tool.text( "Disabled"); } }); break; case 4: tool.jqxDropDownList({ width: 130, source: [ "<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 }); break; case 5: tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 6: tool.jqxInput({ width: 200, placeHolder: "Type here to search..." }); break; case 7: let button = document.createElement( 'div'); let img = document.createElement( 'img'); img.src = '../images/administrator.png' img.title = 'Custom tool'; button.appendChild(img); tool[0].appendChild(button); tool.jqxButton({ height: 15 }); break; } }; return ( <JqxToolBar ref= 'myToolBar' width={700} height={35} tools={tools} initTools={initTools} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
