jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
73 lines (68 loc) • 3.27 kB
JavaScript
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[0].innerText = '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');
button.innerHTML = "<img src='../../../../images/administrator.png' title='Custom tool' />";
tool[0].appendChild(button);
tool.jqxButton({ height: 15 });
break;
}
}
return (
<JqxToolBar
width={800} height={35}
initTools={initTools} tools={tools}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));