|
disabled
|
boolean
|
false
|
Sets or gets the disabled property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Toolbar Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var initTools = function (type, index, tool, menuToolIninitialization) { if (type == "toggleButton") { var icon = document.createElement( 'div'); icon.classList.add( 'jqx-editor-toolbar-icon'); icon.classList.add( 'buttonIcon'); tool[0].style.height = "27px"; } switch (index) { case 0: icon.classList.add( 'jqx-editor-toolbar-icon-bold'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 1: icon.classList.add( 'jqx-editor-toolbar-icon-italic'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 2: icon.classList.add( 'jqx-editor-toolbar-icon-underline'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 3: new jqxDropDownList(tool, { width: 130, autoDropDownHeight: true, 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 4: new jqxComboBox(tool, { width: 50, autoDropDownHeight: true, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 5: new jqxInput(tool, { height: 25, width: 200, placeHolder: "Type here to search..." }); break; } }; var tools = 'toggleButton toggleButton toggleButton | dropdownlist combobox | input' JQXElements.settings[ "toolbarSettings"] = { tools:tools, initTools:initTools, theme: "light",disabled: true } </script></head><body> <jqx-tool-bar settings="toolbarSettings"></jqx-tool-bar>
|
|
height
|
number
|
35
|
Sets or gets the height property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Toolbar Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var initTools = function (type, index, tool, menuToolIninitialization) { if (type == "toggleButton") { var icon = document.createElement( 'div'); icon.classList.add( 'jqx-editor-toolbar-icon'); icon.classList.add( 'buttonIcon'); tool[0].style.height = "27px"; } switch (index) { case 0: icon.classList.add( 'jqx-editor-toolbar-icon-bold'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 1: icon.classList.add( 'jqx-editor-toolbar-icon-italic'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 2: icon.classList.add( 'jqx-editor-toolbar-icon-underline'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 3: new jqxDropDownList(tool, { width: 130, autoDropDownHeight: true, 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 4: new jqxComboBox(tool, { width: 50, autoDropDownHeight: true, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 5: new jqxInput(tool, { height: 25, width: 200, placeHolder: "Type here to search..." }); break; } }; var tools = 'toggleButton toggleButton toggleButton | dropdownlist combobox | input' JQXElements.settings[ "toolbarSettings"] = { tools:tools, initTools:initTools, theme: "light" } </script></head><body> <jqx-tool-bar settings="toolbarSettings"></jqx-tool-bar>
|
|
initTools
|
function
|
null
|
Sets or gets the initTools property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Toolbar Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var initTools = function (type, index, tool, menuToolIninitialization) { if (type == "toggleButton") { var icon = document.createElement( 'div'); icon.classList.add( 'jqx-editor-toolbar-icon'); icon.classList.add( 'buttonIcon'); tool[0].style.height = "27px"; } switch (index) { case 0: icon.classList.add( 'jqx-editor-toolbar-icon-bold'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 1: icon.classList.add( 'jqx-editor-toolbar-icon-italic'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 2: icon.classList.add( 'jqx-editor-toolbar-icon-underline'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 3: new jqxDropDownList(tool, { width: 130, autoDropDownHeight: true, 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 4: new jqxComboBox(tool, { width: 50, autoDropDownHeight: true, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 5: new jqxInput(tool, { height: 25, width: 200, placeHolder: "Type here to search..." }); break; } }; var tools = 'toggleButton toggleButton toggleButton | dropdownlist combobox | input' JQXElements.settings[ "toolbarSettings"] = { tools:tools, initTools:initTools, theme: "light" } </script></head><body> <jqx-tool-bar settings="toolbarSettings"></jqx-tool-bar>
|
|
minimizeWidth
|
number
|
200
|
Sets or gets the minimizeWidth property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Toolbar Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var initTools = function (type, index, tool, menuToolIninitialization) { if (type == "toggleButton") { var icon = document.createElement( 'div'); icon.classList.add( 'jqx-editor-toolbar-icon'); icon.classList.add( 'buttonIcon'); tool[0].style.height = "27px"; } switch (index) { case 0: icon.classList.add( 'jqx-editor-toolbar-icon-bold'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 1: icon.classList.add( 'jqx-editor-toolbar-icon-italic'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 2: icon.classList.add( 'jqx-editor-toolbar-icon-underline'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 3: new jqxDropDownList(tool, { width: 130, autoDropDownHeight: true, 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 4: new jqxComboBox(tool, { width: 50, autoDropDownHeight: true, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 5: new jqxInput(tool, { height: 25, width: 200, placeHolder: "Type here to search..." }); break; } }; var tools = 'toggleButton toggleButton toggleButton | dropdownlist combobox | input' JQXElements.settings[ "toolbarSettings"] = { tools:tools, initTools:initTools, theme: "light",minimizeWidth:250 } </script></head><body> <jqx-tool-bar settings="toolbarSettings"></jqx-tool-bar>
|
|
minWidth
|
number
|
null
|
Sets or gets the minWidth property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Toolbar Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var initTools = function (type, index, tool, menuToolIninitialization) { if (type == "toggleButton") { var icon = document.createElement( 'div'); icon.classList.add( 'jqx-editor-toolbar-icon'); icon.classList.add( 'buttonIcon'); tool[0].style.height = "27px"; } switch (index) { case 0: icon.classList.add( 'jqx-editor-toolbar-icon-bold'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 1: icon.classList.add( 'jqx-editor-toolbar-icon-italic'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 2: icon.classList.add( 'jqx-editor-toolbar-icon-underline'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 3: new jqxDropDownList(tool, { width: 130, autoDropDownHeight: true, 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 4: new jqxComboBox(tool, { width: 50, autoDropDownHeight: true, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 5: new jqxInput(tool, { height: 25, width: 200, placeHolder: "Type here to search..." }); break; } }; var tools = 'toggleButton toggleButton toggleButton | dropdownlist combobox | input' JQXElements.settings[ "toolbarSettings"] = { tools:tools, initTools:initTools, theme: "light",minWidth:300 } </script></head><body> <jqx-tool-bar settings="toolbarSettings"></jqx-tool-bar>
|
|
maxWidth
|
number
|
null
|
Sets or gets the maxWidth property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Toolbar Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var initTools = function (type, index, tool, menuToolIninitialization) { if (type == "toggleButton") { var icon = document.createElement( 'div'); icon.classList.add( 'jqx-editor-toolbar-icon'); icon.classList.add( 'buttonIcon'); tool[0].style.height = "27px"; } switch (index) { case 0: icon.classList.add( 'jqx-editor-toolbar-icon-bold'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 1: icon.classList.add( 'jqx-editor-toolbar-icon-italic'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 2: icon.classList.add( 'jqx-editor-toolbar-icon-underline'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 3: new jqxDropDownList(tool, { width: 130, autoDropDownHeight: true, 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 4: new jqxComboBox(tool, { width: 50, autoDropDownHeight: true, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 5: new jqxInput(tool, { height: 25, width: 200, placeHolder: "Type here to search..." }); break; } }; var tools = 'toggleButton toggleButton toggleButton | dropdownlist combobox | input' JQXElements.settings[ "toolbarSettings"] = { tools:tools, initTools:initTools, theme: "light",maxWidth:1200 } </script></head><body> <jqx-tool-bar settings="toolbarSettings"></jqx-tool-bar>
|
|
rtl
|
boolean
|
false
|
Sets or gets the rtl property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Toolbar Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var initTools = function (type, index, tool, menuToolIninitialization) { if (type == "toggleButton") { var icon = document.createElement( 'div'); icon.classList.add( 'jqx-editor-toolbar-icon'); icon.classList.add( 'buttonIcon'); tool[0].style.height = "27px"; } switch (index) { case 0: icon.classList.add( 'jqx-editor-toolbar-icon-bold'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 1: icon.classList.add( 'jqx-editor-toolbar-icon-italic'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 2: icon.classList.add( 'jqx-editor-toolbar-icon-underline'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 3: new jqxDropDownList(tool, { width: 130, autoDropDownHeight: true, 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 4: new jqxComboBox(tool, { width: 50, autoDropDownHeight: true, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 5: new jqxInput(tool, { height: 25, width: 200, placeHolder: "Type here to search..." }); break; } }; var tools = 'toggleButton toggleButton toggleButton | dropdownlist combobox | input' JQXElements.settings[ "toolbarSettings"] = { tools:tools, initTools:initTools, theme: "light",rtl: true } </script></head><body> <jqx-tool-bar settings="toolbarSettings"></jqx-tool-bar>
|
|
tools
|
string
|
''
|
Sets or gets the tools property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Toolbar Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var initTools = function (type, index, tool, menuToolIninitialization) { if (type == "toggleButton") { var icon = document.createElement( 'div'); icon.classList.add( 'jqx-editor-toolbar-icon'); icon.classList.add( 'buttonIcon'); tool[0].style.height = "27px"; } switch (index) { case 0: icon.classList.add( 'jqx-editor-toolbar-icon-bold'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 1: icon.classList.add( 'jqx-editor-toolbar-icon-italic'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 2: icon.classList.add( 'jqx-editor-toolbar-icon-underline'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 3: new jqxDropDownList(tool, { width: 130, autoDropDownHeight: true, 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 4: new jqxComboBox(tool, { width: 50, autoDropDownHeight: true, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 5: new jqxInput(tool, { height: 25, width: 200, placeHolder: "Type here to search..." }); break; } }; var tools = 'toggleButton toggleButton toggleButton | dropdownlist combobox | input' JQXElements.settings[ "toolbarSettings"] = { tools:tools, initTools:initTools, theme: "light" } </script></head><body> <jqx-tool-bar settings="toolbarSettings"></jqx-tool-bar>
|
|
theme
|
string
|
''
|
Sets or gets the theme property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Toolbar Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var initTools = function (type, index, tool, menuToolIninitialization) { if (type == "toggleButton") { var icon = document.createElement( 'div'); icon.classList.add( 'jqx-editor-toolbar-icon'); icon.classList.add( 'buttonIcon'); tool[0].style.height = "27px"; } switch (index) { case 0: icon.classList.add( 'jqx-editor-toolbar-icon-bold'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 1: icon.classList.add( 'jqx-editor-toolbar-icon-italic'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 2: icon.classList.add( 'jqx-editor-toolbar-icon-underline'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 3: new jqxDropDownList(tool, { width: 130, autoDropDownHeight: true, 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 4: new jqxComboBox(tool, { width: 50, autoDropDownHeight: true, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 5: new jqxInput(tool, { height: 25, width: 200, placeHolder: "Type here to search..." }); break; } }; var tools = 'toggleButton toggleButton toggleButton | dropdownlist combobox | input' JQXElements.settings[ "toolbarSettings"] = { tools:tools, initTools:initTools, theme: "light" } </script></head><body> <jqx-tool-bar settings="toolbarSettings"></jqx-tool-bar>
|
|
width
|
number
|
null
|
Sets or gets the width property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Toolbar Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var initTools = function (type, index, tool, menuToolIninitialization) { if (type == "toggleButton") { var icon = document.createElement( 'div'); icon.classList.add( 'jqx-editor-toolbar-icon'); icon.classList.add( 'buttonIcon'); tool[0].style.height = "27px"; } switch (index) { case 0: icon.classList.add( 'jqx-editor-toolbar-icon-bold'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 1: icon.classList.add( 'jqx-editor-toolbar-icon-italic'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 2: icon.classList.add( 'jqx-editor-toolbar-icon-underline'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 3: new jqxDropDownList(tool, { width: 130, autoDropDownHeight: true, 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 4: new jqxComboBox(tool, { width: 50, autoDropDownHeight: true, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 5: new jqxInput(tool, { height: 25, width: 200, placeHolder: "Type here to search..." }); break; } }; var tools = 'toggleButton toggleButton toggleButton | dropdownlist combobox | input' JQXElements.settings[ "toolbarSettings"] = { tools:tools, initTools:initTools, theme: "light" } </script></head><body> <jqx-tool-bar settings="toolbarSettings"></jqx-tool-bar>
|
|
|
|
close
|
Event
|
|
Code examples
Bind to the close event of jqxToolBar.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Toolbar Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var initTools = function (type, index, tool, menuToolIninitialization) { if (type == "toggleButton") { var icon = document.createElement( 'div'); icon.classList.add( 'jqx-editor-toolbar-icon'); icon.classList.add( 'buttonIcon'); tool[0].style.height = "27px"; } switch (index) { case 0: icon.classList.add( 'jqx-editor-toolbar-icon-bold'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 1: icon.classList.add( 'jqx-editor-toolbar-icon-italic'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 2: icon.classList.add( 'jqx-editor-toolbar-icon-underline'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 3: new jqxDropDownList(tool, { width: 130, autoDropDownHeight: true, 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 4: new jqxComboBox(tool, { width: 50, autoDropDownHeight: true, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 5: new jqxInput(tool, { height: 25, width: 200, placeHolder: "Type here to search..." }); break; } }; var tools = 'toggleButton toggleButton toggleButton | dropdownlist combobox | input' JQXElements.settings[ "toolbarSettings"] = { tools:tools, initTools:initTools, theme: "light" } window.onload = function() { document.querySelector( "jqx-tool-bar").addEventListener("close", function(event) { // Your code here. }); }; </script></head><body> <jqx-tool-bar settings="toolbarSettings"></jqx-tool-bar>
|
|
open
|
Event
|
|
Code examples
Bind to the open event of jqxToolBar.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Toolbar Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var initTools = function (type, index, tool, menuToolIninitialization) { if (type == "toggleButton") { var icon = document.createElement( 'div'); icon.classList.add( 'jqx-editor-toolbar-icon'); icon.classList.add( 'buttonIcon'); tool[0].style.height = "27px"; } switch (index) { case 0: icon.classList.add( 'jqx-editor-toolbar-icon-bold'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 1: icon.classList.add( 'jqx-editor-toolbar-icon-italic'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 2: icon.classList.add( 'jqx-editor-toolbar-icon-underline'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 3: new jqxDropDownList(tool, { width: 130, autoDropDownHeight: true, 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 4: new jqxComboBox(tool, { width: 50, autoDropDownHeight: true, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 5: new jqxInput(tool, { height: 25, width: 200, placeHolder: "Type here to search..." }); break; } }; var tools = 'toggleButton toggleButton toggleButton | dropdownlist combobox | input' JQXElements.settings[ "toolbarSettings"] = { tools:tools, initTools:initTools, theme: "light" } window.onload = function() { document.querySelector( "jqx-tool-bar").addEventListener("open", function(event) { // Your code here. }); }; </script></head><body> <jqx-tool-bar settings="toolbarSettings"></jqx-tool-bar>
|
|
|
|
addTool
|
Method
|
|
| Parameter |
Type |
Description |
| type |
string |
Possible values are: 'button', 'toggleButton', 'dropdownlist', 'combobox', 'input' and 'custom' |
| position |
string |
Possible values are 'first' and 'last' |
| separator |
boolean |
|
| menuToolIninitialization |
function |
It is passed three parameters:
type - the type of the tool.
tool - a jQuery object representing the tool.
menuToolIninitialization - a boolean value, specifying whether the callback is called for the toolbar tool (false) or the pop-up menu tool (true). |
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Toolbar Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var initTools = function (type, index, tool, menuToolIninitialization) { if (type == "toggleButton") { var icon = document.createElement( 'div'); icon.classList.add( 'jqx-editor-toolbar-icon'); icon.classList.add( 'buttonIcon'); tool[0].style.height = "27px"; } switch (index) { case 0: icon.classList.add( 'jqx-editor-toolbar-icon-bold'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 1: icon.classList.add( 'jqx-editor-toolbar-icon-italic'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 2: icon.classList.add( 'jqx-editor-toolbar-icon-underline'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 3: new jqxDropDownList(tool, { width: 130, autoDropDownHeight: true, 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 4: new jqxComboBox(tool, { width: 50, autoDropDownHeight: true, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 5: new jqxInput(tool, { height: 25, width: 200, placeHolder: "Type here to search..." }); break; } }; var tools = 'toggleButton toggleButton toggleButton | dropdownlist combobox | input' JQXElements.settings[ "toolbarSettings"] = { } window.onload = function() { document.querySelector( "jqx-tool-bar").addTool( 'button','first','',null); } </script></head><body> <jqx-tool-bar settings="toolbarSettings"></jqx-tool-bar>
|
|
disableTool
|
Method
|
|
| Parameter |
Type |
Description |
| index |
number |
|
| disable |
boolean |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Toolbar Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var initTools = function (type, index, tool, menuToolIninitialization) { if (type == "toggleButton") { var icon = document.createElement( 'div'); icon.classList.add( 'jqx-editor-toolbar-icon'); icon.classList.add( 'buttonIcon'); tool[0].style.height = "27px"; } switch (index) { case 0: icon.classList.add( 'jqx-editor-toolbar-icon-bold'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 1: icon.classList.add( 'jqx-editor-toolbar-icon-italic'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 2: icon.classList.add( 'jqx-editor-toolbar-icon-underline'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 3: new jqxDropDownList(tool, { width: 130, autoDropDownHeight: true, 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 4: new jqxComboBox(tool, { width: 50, autoDropDownHeight: true, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 5: new jqxInput(tool, { height: 25, width: 200, placeHolder: "Type here to search..." }); break; } }; var tools = 'toggleButton toggleButton toggleButton | dropdownlist combobox | input' JQXElements.settings[ "toolbarSettings"] = { } window.onload = function() { document.querySelector( "jqx-tool-bar").disableTool(1,true); } </script></head><body> <jqx-tool-bar settings="toolbarSettings"></jqx-tool-bar>
|
|
destroy
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Toolbar Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var initTools = function (type, index, tool, menuToolIninitialization) { if (type == "toggleButton") { var icon = document.createElement( 'div'); icon.classList.add( 'jqx-editor-toolbar-icon'); icon.classList.add( 'buttonIcon'); tool[0].style.height = "27px"; } switch (index) { case 0: icon.classList.add( 'jqx-editor-toolbar-icon-bold'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 1: icon.classList.add( 'jqx-editor-toolbar-icon-italic'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 2: icon.classList.add( 'jqx-editor-toolbar-icon-underline'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 3: new jqxDropDownList(tool, { width: 130, autoDropDownHeight: true, 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 4: new jqxComboBox(tool, { width: 50, autoDropDownHeight: true, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 5: new jqxInput(tool, { height: 25, width: 200, placeHolder: "Type here to search..." }); break; } }; var tools = 'toggleButton toggleButton toggleButton | dropdownlist combobox | input' JQXElements.settings[ "toolbarSettings"] = { } window.onload = function() { document.querySelector( "jqx-tool-bar").destroy(); } </script></head><body> <jqx-tool-bar settings="toolbarSettings"></jqx-tool-bar>
|
|
destroyTool
|
Method
|
|
| Parameter |
Type |
Description |
| index |
number |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Toolbar Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var initTools = function (type, index, tool, menuToolIninitialization) { if (type == "toggleButton") { var icon = document.createElement( 'div'); icon.classList.add( 'jqx-editor-toolbar-icon'); icon.classList.add( 'buttonIcon'); tool[0].style.height = "27px"; } switch (index) { case 0: icon.classList.add( 'jqx-editor-toolbar-icon-bold'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 1: icon.classList.add( 'jqx-editor-toolbar-icon-italic'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 2: icon.classList.add( 'jqx-editor-toolbar-icon-underline'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 3: new jqxDropDownList(tool, { width: 130, autoDropDownHeight: true, 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 4: new jqxComboBox(tool, { width: 50, autoDropDownHeight: true, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 5: new jqxInput(tool, { height: 25, width: 200, placeHolder: "Type here to search..." }); break; } }; var tools = 'toggleButton toggleButton toggleButton | dropdownlist combobox | input' JQXElements.settings[ "toolbarSettings"] = { } window.onload = function() { document.querySelector( "jqx-tool-bar").destroyTool(1); } </script></head><body> <jqx-tool-bar settings="toolbarSettings"></jqx-tool-bar>
|
|
getTools
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
Array
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Toolbar Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var initTools = function (type, index, tool, menuToolIninitialization) { if (type == "toggleButton") { var icon = document.createElement( 'div'); icon.classList.add( 'jqx-editor-toolbar-icon'); icon.classList.add( 'buttonIcon'); tool[0].style.height = "27px"; } switch (index) { case 0: icon.classList.add( 'jqx-editor-toolbar-icon-bold'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 1: icon.classList.add( 'jqx-editor-toolbar-icon-italic'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 2: icon.classList.add( 'jqx-editor-toolbar-icon-underline'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 3: new jqxDropDownList(tool, { width: 130, autoDropDownHeight: true, 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 4: new jqxComboBox(tool, { width: 50, autoDropDownHeight: true, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 5: new jqxInput(tool, { height: 25, width: 200, placeHolder: "Type here to search..." }); break; } }; var tools = 'toggleButton toggleButton toggleButton | dropdownlist combobox | input' JQXElements.settings[ "toolbarSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-tool-bar").getTools(); } </script></head><body> <jqx-tool-bar settings="toolbarSettings"></jqx-tool-bar>
|
|
render
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Toolbar Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var initTools = function (type, index, tool, menuToolIninitialization) { if (type == "toggleButton") { var icon = document.createElement( 'div'); icon.classList.add( 'jqx-editor-toolbar-icon'); icon.classList.add( 'buttonIcon'); tool[0].style.height = "27px"; } switch (index) { case 0: icon.classList.add( 'jqx-editor-toolbar-icon-bold'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 1: icon.classList.add( 'jqx-editor-toolbar-icon-italic'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 2: icon.classList.add( 'jqx-editor-toolbar-icon-underline'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 3: new jqxDropDownList(tool, { width: 130, autoDropDownHeight: true, 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 4: new jqxComboBox(tool, { width: 50, autoDropDownHeight: true, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 5: new jqxInput(tool, { height: 25, width: 200, placeHolder: "Type here to search..." }); break; } }; var tools = 'toggleButton toggleButton toggleButton | dropdownlist combobox | input' JQXElements.settings[ "toolbarSettings"] = { } window.onload = function() { document.querySelector( "jqx-tool-bar").render(); } </script></head><body> <jqx-tool-bar settings="toolbarSettings"></jqx-tool-bar>
|
|
refresh
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Toolbar Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var initTools = function (type, index, tool, menuToolIninitialization) { if (type == "toggleButton") { var icon = document.createElement( 'div'); icon.classList.add( 'jqx-editor-toolbar-icon'); icon.classList.add( 'buttonIcon'); tool[0].style.height = "27px"; } switch (index) { case 0: icon.classList.add( 'jqx-editor-toolbar-icon-bold'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 1: icon.classList.add( 'jqx-editor-toolbar-icon-italic'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 2: icon.classList.add( 'jqx-editor-toolbar-icon-underline'); icon.style.marginTop = '-2px'; tool[0].appendChild(icon); break; case 3: new jqxDropDownList(tool, { width: 130, autoDropDownHeight: true, 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 4: new jqxComboBox(tool, { width: 50, autoDropDownHeight: true, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 }); break; case 5: new jqxInput(tool, { height: 25, width: 200, placeHolder: "Type here to search..." }); break; } }; var tools = 'toggleButton toggleButton toggleButton | dropdownlist combobox | input' JQXElements.settings[ "toolbarSettings"] = { } window.onload = function() { document.querySelector( "jqx-tool-bar").refresh(); } </script></head><body> <jqx-tool-bar settings="toolbarSettings"></jqx-tool-bar>
|
