disabled
|
bool
|
false
|
Sets or gets the disabled property.
<script src="~/jqwidgets/jqxbuttons.js"></script> <script src="~/jqwidgets/jqxscrollbar.js"></script> <script src="~/jqwidgets/jqxlistbox.js"></script> <script src="~/jqwidgets/jqxinput.js"></script> <script src="~/jqwidgets/jqxdropdownlist.js"></script> <script src="~/jqwidgets/jqxcombobox.js"></script> <script src="~/jqwidgets/jqxtoolbar.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers @{ ViewData[ "Title"] = "ASP .NET MVC Toolbar Example"; } <style type="text/css"> .buttonIcon { margin: -5px 0 0 -3px; width: 16px; height: 17px; } </style><script> function initTools (type, index, tool, menuToolIninitialization) { var theme = ""; if (type == "toggleButton") { var icon = $( "<div class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-" + theme + " buttonIcon'></div>"); } switch (index) { case 0: icon.addClass( "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-" + theme); icon.attr( "title", "Bold"); tool.append(icon); break; case 1: icon.addClass( "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-" + theme); icon.attr( "title", "Italic"); tool.append(icon); break; case 2: icon.addClass( "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-" + theme); icon.attr( "title", "Underline"); tool.append(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", function () { var 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: var button = $( "<div>" + "<img src='../../images/administrator.png' title='Custom tool' />" + "</div>"); tool.append(button); button.jqxButton({ height: 15 }); break; } } </script><jqx-tool-bar id="toolbar" disabled="true" initTools="initTools()" tools="toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom" width="800" height="35"></jqx-tool-bar>
|
height
|
int
|
35
|
Sets or gets the height property.
<script src="~/jqwidgets/jqxbuttons.js"></script> <script src="~/jqwidgets/jqxscrollbar.js"></script> <script src="~/jqwidgets/jqxlistbox.js"></script> <script src="~/jqwidgets/jqxinput.js"></script> <script src="~/jqwidgets/jqxdropdownlist.js"></script> <script src="~/jqwidgets/jqxcombobox.js"></script> <script src="~/jqwidgets/jqxtoolbar.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers @{ ViewData[ "Title"] = "ASP .NET MVC Toolbar Example"; } <style type="text/css"> .buttonIcon { margin: -5px 0 0 -3px; width: 16px; height: 17px; } </style><script> function initTools (type, index, tool, menuToolIninitialization) { var theme = ""; if (type == "toggleButton") { var icon = $( "<div class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-" + theme + " buttonIcon'></div>"); } switch (index) { case 0: icon.addClass( "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-" + theme); icon.attr( "title", "Bold"); tool.append(icon); break; case 1: icon.addClass( "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-" + theme); icon.attr( "title", "Italic"); tool.append(icon); break; case 2: icon.addClass( "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-" + theme); icon.attr( "title", "Underline"); tool.append(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", function () { var 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: var button = $( "<div>" + "<img src='../../images/administrator.png' title='Custom tool' />" + "</div>"); tool.append(button); button.jqxButton({ height: 15 }); break; } } </script><jqx-tool-bar id="toolbar" height="50" initTools="initTools()" tools="toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom" width="800" height="35"></jqx-tool-bar>
|
initTools
|
string
|
null
|
Sets or gets the initTools property.
<script src="~/jqwidgets/jqxbuttons.js"></script> <script src="~/jqwidgets/jqxscrollbar.js"></script> <script src="~/jqwidgets/jqxlistbox.js"></script> <script src="~/jqwidgets/jqxinput.js"></script> <script src="~/jqwidgets/jqxdropdownlist.js"></script> <script src="~/jqwidgets/jqxcombobox.js"></script> <script src="~/jqwidgets/jqxtoolbar.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers @{ ViewData[ "Title"] = "ASP .NET MVC Toolbar Example"; } <style type="text/css"> .buttonIcon { margin: -5px 0 0 -3px; width: 16px; height: 17px; } </style><script> function initTools (type, index, tool, menuToolIninitialization) { var theme = ""; if (type == "toggleButton") { var icon = $( "<div class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-" + theme + " buttonIcon'></div>"); } switch (index) { case 0: icon.addClass( "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-" + theme); icon.attr( "title", "Bold"); tool.append(icon); break; case 1: icon.addClass( "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-" + theme); icon.attr( "title", "Italic"); tool.append(icon); break; case 2: icon.addClass( "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-" + theme); icon.attr( "title", "Underline"); tool.append(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", function () { var 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: var button = $( "<div>" + "<img src='../../images/administrator.png' title='Custom tool' />" + "</div>"); tool.append(button); button.jqxButton({ height: 15 }); break; } } </script><jqx-tool-bar id="toolbar" init-tools="initTools" initTools="initTools()" tools="toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom" width="800" height="35"></jqx-tool-bar>
|
minimizeWidth
|
int
|
200
|
Sets or gets the minimizeWidth property.
<script src="~/jqwidgets/jqxbuttons.js"></script> <script src="~/jqwidgets/jqxscrollbar.js"></script> <script src="~/jqwidgets/jqxlistbox.js"></script> <script src="~/jqwidgets/jqxinput.js"></script> <script src="~/jqwidgets/jqxdropdownlist.js"></script> <script src="~/jqwidgets/jqxcombobox.js"></script> <script src="~/jqwidgets/jqxtoolbar.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers @{ ViewData[ "Title"] = "ASP .NET MVC Toolbar Example"; } <style type="text/css"> .buttonIcon { margin: -5px 0 0 -3px; width: 16px; height: 17px; } </style><script> function initTools (type, index, tool, menuToolIninitialization) { var theme = ""; if (type == "toggleButton") { var icon = $( "<div class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-" + theme + " buttonIcon'></div>"); } switch (index) { case 0: icon.addClass( "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-" + theme); icon.attr( "title", "Bold"); tool.append(icon); break; case 1: icon.addClass( "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-" + theme); icon.attr( "title", "Italic"); tool.append(icon); break; case 2: icon.addClass( "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-" + theme); icon.attr( "title", "Underline"); tool.append(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", function () { var 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: var button = $( "<div>" + "<img src='../../images/administrator.png' title='Custom tool' />" + "</div>"); tool.append(button); button.jqxButton({ height: 15 }); break; } } </script><jqx-tool-bar id="toolbar" minimize-width="250" initTools="initTools()" tools="toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom" width="800" height="35"></jqx-tool-bar>
|
minWidth
|
int
|
null
|
Sets or gets the minWidth property.
<script src="~/jqwidgets/jqxbuttons.js"></script> <script src="~/jqwidgets/jqxscrollbar.js"></script> <script src="~/jqwidgets/jqxlistbox.js"></script> <script src="~/jqwidgets/jqxinput.js"></script> <script src="~/jqwidgets/jqxdropdownlist.js"></script> <script src="~/jqwidgets/jqxcombobox.js"></script> <script src="~/jqwidgets/jqxtoolbar.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers @{ ViewData[ "Title"] = "ASP .NET MVC Toolbar Example"; } <style type="text/css"> .buttonIcon { margin: -5px 0 0 -3px; width: 16px; height: 17px; } </style><script> function initTools (type, index, tool, menuToolIninitialization) { var theme = ""; if (type == "toggleButton") { var icon = $( "<div class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-" + theme + " buttonIcon'></div>"); } switch (index) { case 0: icon.addClass( "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-" + theme); icon.attr( "title", "Bold"); tool.append(icon); break; case 1: icon.addClass( "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-" + theme); icon.attr( "title", "Italic"); tool.append(icon); break; case 2: icon.addClass( "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-" + theme); icon.attr( "title", "Underline"); tool.append(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", function () { var 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: var button = $( "<div>" + "<img src='../../images/administrator.png' title='Custom tool' />" + "</div>"); tool.append(button); button.jqxButton({ height: 15 }); break; } } </script><jqx-tool-bar id="toolbar" min-width="300" initTools="initTools()" tools="toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom" width="800" height="35"></jqx-tool-bar>
|
maxWidth
|
int
|
null
|
Sets or gets the maxWidth property.
<script src="~/jqwidgets/jqxbuttons.js"></script> <script src="~/jqwidgets/jqxscrollbar.js"></script> <script src="~/jqwidgets/jqxlistbox.js"></script> <script src="~/jqwidgets/jqxinput.js"></script> <script src="~/jqwidgets/jqxdropdownlist.js"></script> <script src="~/jqwidgets/jqxcombobox.js"></script> <script src="~/jqwidgets/jqxtoolbar.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers @{ ViewData[ "Title"] = "ASP .NET MVC Toolbar Example"; } <style type="text/css"> .buttonIcon { margin: -5px 0 0 -3px; width: 16px; height: 17px; } </style><script> function initTools (type, index, tool, menuToolIninitialization) { var theme = ""; if (type == "toggleButton") { var icon = $( "<div class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-" + theme + " buttonIcon'></div>"); } switch (index) { case 0: icon.addClass( "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-" + theme); icon.attr( "title", "Bold"); tool.append(icon); break; case 1: icon.addClass( "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-" + theme); icon.attr( "title", "Italic"); tool.append(icon); break; case 2: icon.addClass( "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-" + theme); icon.attr( "title", "Underline"); tool.append(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", function () { var 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: var button = $( "<div>" + "<img src='../../images/administrator.png' title='Custom tool' />" + "</div>"); tool.append(button); button.jqxButton({ height: 15 }); break; } } </script><jqx-tool-bar id="toolbar" max-width="1200" initTools="initTools()" tools="toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom" width="800" height="35"></jqx-tool-bar>
|
rtl
|
bool
|
false
|
Sets or gets the rtl property.
<script src="~/jqwidgets/jqxbuttons.js"></script> <script src="~/jqwidgets/jqxscrollbar.js"></script> <script src="~/jqwidgets/jqxlistbox.js"></script> <script src="~/jqwidgets/jqxinput.js"></script> <script src="~/jqwidgets/jqxdropdownlist.js"></script> <script src="~/jqwidgets/jqxcombobox.js"></script> <script src="~/jqwidgets/jqxtoolbar.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers @{ ViewData[ "Title"] = "ASP .NET MVC Toolbar Example"; } <style type="text/css"> .buttonIcon { margin: -5px 0 0 -3px; width: 16px; height: 17px; } </style><script> function initTools (type, index, tool, menuToolIninitialization) { var theme = ""; if (type == "toggleButton") { var icon = $( "<div class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-" + theme + " buttonIcon'></div>"); } switch (index) { case 0: icon.addClass( "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-" + theme); icon.attr( "title", "Bold"); tool.append(icon); break; case 1: icon.addClass( "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-" + theme); icon.attr( "title", "Italic"); tool.append(icon); break; case 2: icon.addClass( "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-" + theme); icon.attr( "title", "Underline"); tool.append(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", function () { var 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: var button = $( "<div>" + "<img src='../../images/administrator.png' title='Custom tool' />" + "</div>"); tool.append(button); button.jqxButton({ height: 15 }); break; } } </script><jqx-tool-bar id="toolbar" rtl="true" initTools="initTools()" tools="toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom" width="800" height="35"></jqx-tool-bar>
|
tools
|
string
|
''
|
Sets or gets the tools property.
<script src="~/jqwidgets/jqxbuttons.js"></script> <script src="~/jqwidgets/jqxscrollbar.js"></script> <script src="~/jqwidgets/jqxlistbox.js"></script> <script src="~/jqwidgets/jqxinput.js"></script> <script src="~/jqwidgets/jqxdropdownlist.js"></script> <script src="~/jqwidgets/jqxcombobox.js"></script> <script src="~/jqwidgets/jqxtoolbar.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers @{ ViewData[ "Title"] = "ASP .NET MVC Toolbar Example"; } <style type="text/css"> .buttonIcon { margin: -5px 0 0 -3px; width: 16px; height: 17px; } </style><script> function initTools (type, index, tool, menuToolIninitialization) { var theme = ""; if (type == "toggleButton") { var icon = $( "<div class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-" + theme + " buttonIcon'></div>"); } switch (index) { case 0: icon.addClass( "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-" + theme); icon.attr( "title", "Bold"); tool.append(icon); break; case 1: icon.addClass( "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-" + theme); icon.attr( "title", "Italic"); tool.append(icon); break; case 2: icon.addClass( "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-" + theme); icon.attr( "title", "Underline"); tool.append(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", function () { var 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: var button = $( "<div>" + "<img src='../../images/administrator.png' title='Custom tool' />" + "</div>"); tool.append(button); button.jqxButton({ height: 15 }); break; } } </script><jqx-tool-bar id="toolbar" tools="button button button" initTools="initTools()" tools="toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom" width="800" height="35"></jqx-tool-bar>
|
theme
|
string
|
''
|
Sets or gets the theme property.
<script src="~/jqwidgets/jqxbuttons.js"></script> <script src="~/jqwidgets/jqxscrollbar.js"></script> <script src="~/jqwidgets/jqxlistbox.js"></script> <script src="~/jqwidgets/jqxinput.js"></script> <script src="~/jqwidgets/jqxdropdownlist.js"></script> <script src="~/jqwidgets/jqxcombobox.js"></script> <script src="~/jqwidgets/jqxtoolbar.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers @{ ViewData[ "Title"] = "ASP .NET MVC Toolbar Example"; } <style type="text/css"> .buttonIcon { margin: -5px 0 0 -3px; width: 16px; height: 17px; } </style><script> function initTools (type, index, tool, menuToolIninitialization) { var theme = ""; if (type == "toggleButton") { var icon = $( "<div class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-" + theme + " buttonIcon'></div>"); } switch (index) { case 0: icon.addClass( "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-" + theme); icon.attr( "title", "Bold"); tool.append(icon); break; case 1: icon.addClass( "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-" + theme); icon.attr( "title", "Italic"); tool.append(icon); break; case 2: icon.addClass( "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-" + theme); icon.attr( "title", "Underline"); tool.append(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", function () { var 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: var button = $( "<div>" + "<img src='../../images/administrator.png' title='Custom tool' />" + "</div>"); tool.append(button); button.jqxButton({ height: 15 }); break; } } </script><jqx-tool-bar id="toolbar" theme="energyblue" initTools="initTools()" tools="toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom" width="800" height="35"></jqx-tool-bar>
|
width
|
int
|
null
|
Sets or gets the width property.
<script src="~/jqwidgets/jqxbuttons.js"></script> <script src="~/jqwidgets/jqxscrollbar.js"></script> <script src="~/jqwidgets/jqxlistbox.js"></script> <script src="~/jqwidgets/jqxinput.js"></script> <script src="~/jqwidgets/jqxdropdownlist.js"></script> <script src="~/jqwidgets/jqxcombobox.js"></script> <script src="~/jqwidgets/jqxtoolbar.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers @{ ViewData[ "Title"] = "ASP .NET MVC Toolbar Example"; } <style type="text/css"> .buttonIcon { margin: -5px 0 0 -3px; width: 16px; height: 17px; } </style><script> function initTools (type, index, tool, menuToolIninitialization) { var theme = ""; if (type == "toggleButton") { var icon = $( "<div class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-" + theme + " buttonIcon'></div>"); } switch (index) { case 0: icon.addClass( "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-" + theme); icon.attr( "title", "Bold"); tool.append(icon); break; case 1: icon.addClass( "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-" + theme); icon.attr( "title", "Italic"); tool.append(icon); break; case 2: icon.addClass( "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-" + theme); icon.attr( "title", "Underline"); tool.append(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", function () { var 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: var button = $( "<div>" + "<img src='../../images/administrator.png' title='Custom tool' />" + "</div>"); tool.append(button); button.jqxButton({ height: 15 }); break; } } </script><jqx-tool-bar id="toolbar" width="700" initTools="initTools()" tools="toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom" width="800" height="35"></jqx-tool-bar>
|
|
close
|
Event
|
|
Code examples
Bind to the close event of jqxToolBar.
<script src="~/jqwidgets/jqxbuttons.js"></script> <script src="~/jqwidgets/jqxscrollbar.js"></script> <script src="~/jqwidgets/jqxlistbox.js"></script> <script src="~/jqwidgets/jqxinput.js"></script> <script src="~/jqwidgets/jqxdropdownlist.js"></script> <script src="~/jqwidgets/jqxcombobox.js"></script> <script src="~/jqwidgets/jqxtoolbar.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers @{ ViewData[ "Title"] = "ASP .NET MVC Toolbar Example"; } <style type="text/css"> .buttonIcon { margin: -5px 0 0 -3px; width: 16px; height: 17px; } </style><script> function initTools (type, index, tool, menuToolIninitialization) { var theme = ""; if (type == "toggleButton") { var icon = $( "<div class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-" + theme + " buttonIcon'></div>"); } switch (index) { case 0: icon.addClass( "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-" + theme); icon.attr( "title", "Bold"); tool.append(icon); break; case 1: icon.addClass( "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-" + theme); icon.attr( "title", "Italic"); tool.append(icon); break; case 2: icon.addClass( "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-" + theme); icon.attr( "title", "Underline"); tool.append(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", function () { var 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: var button = $( "<div>" + "<img src='../../images/administrator.png' title='Custom tool' />" + "</div>"); tool.append(button); button.jqxButton({ height: 15 }); break; } } </script><jqx-tool-bar id="toolbar" on-close="eventHandler()" initTools="initTools()" tools="toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom" width="800" height="35"></jqx-tool-bar> @section scripts { <script type="text/javascript"> function eventHandler(event) {
|
open
|
Event
|
|
Code examples
Bind to the open event of jqxToolBar.
<script src="~/jqwidgets/jqxbuttons.js"></script> <script src="~/jqwidgets/jqxscrollbar.js"></script> <script src="~/jqwidgets/jqxlistbox.js"></script> <script src="~/jqwidgets/jqxinput.js"></script> <script src="~/jqwidgets/jqxdropdownlist.js"></script> <script src="~/jqwidgets/jqxcombobox.js"></script> <script src="~/jqwidgets/jqxtoolbar.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers @{ ViewData[ "Title"] = "ASP .NET MVC Toolbar Example"; } <style type="text/css"> .buttonIcon { margin: -5px 0 0 -3px; width: 16px; height: 17px; } </style><script> function initTools (type, index, tool, menuToolIninitialization) { var theme = ""; if (type == "toggleButton") { var icon = $( "<div class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-" + theme + " buttonIcon'></div>"); } switch (index) { case 0: icon.addClass( "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-" + theme); icon.attr( "title", "Bold"); tool.append(icon); break; case 1: icon.addClass( "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-" + theme); icon.attr( "title", "Italic"); tool.append(icon); break; case 2: icon.addClass( "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-" + theme); icon.attr( "title", "Underline"); tool.append(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", function () { var 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: var button = $( "<div>" + "<img src='../../images/administrator.png' title='Custom tool' />" + "</div>"); tool.append(button); button.jqxButton({ height: 15 }); break; } } </script><jqx-tool-bar id="toolbar" on-open="eventHandler()" initTools="initTools()" tools="toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom" width="800" height="35"></jqx-tool-bar> @section scripts { <script type="text/javascript"> function eventHandler(event) {
|
|
addTool
|
Method
|
|
<script src="~/jqwidgets/jqxbuttons.js"></script> <script src="~/jqwidgets/jqxscrollbar.js"></script> <script src="~/jqwidgets/jqxlistbox.js"></script> <script src="~/jqwidgets/jqxinput.js"></script> <script src="~/jqwidgets/jqxdropdownlist.js"></script> <script src="~/jqwidgets/jqxcombobox.js"></script> <script src="~/jqwidgets/jqxtoolbar.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers @{ ViewData[ "Title"] = "ASP .NET MVC Toolbar Example"; } <style type="text/css"> .buttonIcon { margin: -5px 0 0 -3px; width: 16px; height: 17px; } </style><script> function initTools (type, index, tool, menuToolIninitialization) { var theme = ""; if (type == "toggleButton") { var icon = $( "<div class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-" + theme + " buttonIcon'></div>"); } switch (index) { case 0: icon.addClass( "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-" + theme); icon.attr( "title", "Bold"); tool.append(icon); break; case 1: icon.addClass( "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-" + theme); icon.attr( "title", "Italic"); tool.append(icon); break; case 2: icon.addClass( "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-" + theme); icon.attr( "title", "Underline"); tool.append(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", function () { var 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: var button = $( "<div>" + "<img src='../../images/administrator.png' title='Custom tool' />" + "</div>"); tool.append(button); button.jqxButton({ height: 15 }); break; } } </script><jqx-tool-bar id="toolbar" instance="getInstance()" initTools="initTools()" tools="toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom" width="800" height="35"></jqx-tool-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance[ "addTool"]( 'button','first','',null);
|
disableTool
|
Method
|
|
<script src="~/jqwidgets/jqxbuttons.js"></script> <script src="~/jqwidgets/jqxscrollbar.js"></script> <script src="~/jqwidgets/jqxlistbox.js"></script> <script src="~/jqwidgets/jqxinput.js"></script> <script src="~/jqwidgets/jqxdropdownlist.js"></script> <script src="~/jqwidgets/jqxcombobox.js"></script> <script src="~/jqwidgets/jqxtoolbar.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers @{ ViewData[ "Title"] = "ASP .NET MVC Toolbar Example"; } <style type="text/css"> .buttonIcon { margin: -5px 0 0 -3px; width: 16px; height: 17px; } </style><script> function initTools (type, index, tool, menuToolIninitialization) { var theme = ""; if (type == "toggleButton") { var icon = $( "<div class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-" + theme + " buttonIcon'></div>"); } switch (index) { case 0: icon.addClass( "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-" + theme); icon.attr( "title", "Bold"); tool.append(icon); break; case 1: icon.addClass( "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-" + theme); icon.attr( "title", "Italic"); tool.append(icon); break; case 2: icon.addClass( "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-" + theme); icon.attr( "title", "Underline"); tool.append(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", function () { var 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: var button = $( "<div>" + "<img src='../../images/administrator.png' title='Custom tool' />" + "</div>"); tool.append(button); button.jqxButton({ height: 15 }); break; } } </script><jqx-tool-bar id="toolbar" instance="getInstance()" initTools="initTools()" tools="toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom" width="800" height="35"></jqx-tool-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance[ "disableTool"](1,true);
|
destroy
|
Method
|
|
<script src="~/jqwidgets/jqxbuttons.js"></script> <script src="~/jqwidgets/jqxscrollbar.js"></script> <script src="~/jqwidgets/jqxlistbox.js"></script> <script src="~/jqwidgets/jqxinput.js"></script> <script src="~/jqwidgets/jqxdropdownlist.js"></script> <script src="~/jqwidgets/jqxcombobox.js"></script> <script src="~/jqwidgets/jqxtoolbar.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers @{ ViewData[ "Title"] = "ASP .NET MVC Toolbar Example"; } <style type="text/css"> .buttonIcon { margin: -5px 0 0 -3px; width: 16px; height: 17px; } </style><script> function initTools (type, index, tool, menuToolIninitialization) { var theme = ""; if (type == "toggleButton") { var icon = $( "<div class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-" + theme + " buttonIcon'></div>"); } switch (index) { case 0: icon.addClass( "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-" + theme); icon.attr( "title", "Bold"); tool.append(icon); break; case 1: icon.addClass( "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-" + theme); icon.attr( "title", "Italic"); tool.append(icon); break; case 2: icon.addClass( "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-" + theme); icon.attr( "title", "Underline"); tool.append(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", function () { var 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: var button = $( "<div>" + "<img src='../../images/administrator.png' title='Custom tool' />" + "</div>"); tool.append(button); button.jqxButton({ height: 15 }); break; } } </script><jqx-tool-bar id="toolbar" instance="getInstance()" initTools="initTools()" tools="toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom" width="800" height="35"></jqx-tool-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) {
|
destroyTool
|
Method
|
|
<script src="~/jqwidgets/jqxbuttons.js"></script> <script src="~/jqwidgets/jqxscrollbar.js"></script> <script src="~/jqwidgets/jqxlistbox.js"></script> <script src="~/jqwidgets/jqxinput.js"></script> <script src="~/jqwidgets/jqxdropdownlist.js"></script> <script src="~/jqwidgets/jqxcombobox.js"></script> <script src="~/jqwidgets/jqxtoolbar.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers @{ ViewData[ "Title"] = "ASP .NET MVC Toolbar Example"; } <style type="text/css"> .buttonIcon { margin: -5px 0 0 -3px; width: 16px; height: 17px; } </style><script> function initTools (type, index, tool, menuToolIninitialization) { var theme = ""; if (type == "toggleButton") { var icon = $( "<div class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-" + theme + " buttonIcon'></div>"); } switch (index) { case 0: icon.addClass( "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-" + theme); icon.attr( "title", "Bold"); tool.append(icon); break; case 1: icon.addClass( "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-" + theme); icon.attr( "title", "Italic"); tool.append(icon); break; case 2: icon.addClass( "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-" + theme); icon.attr( "title", "Underline"); tool.append(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", function () { var 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: var button = $( "<div>" + "<img src='../../images/administrator.png' title='Custom tool' />" + "</div>"); tool.append(button); button.jqxButton({ height: 15 }); break; } } </script><jqx-tool-bar id="toolbar" instance="getInstance()" initTools="initTools()" tools="toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom" width="800" height="35"></jqx-tool-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance[ "destroyTool"](1);
|
getTools
|
Method
|
|
<script src="~/jqwidgets/jqxbuttons.js"></script> <script src="~/jqwidgets/jqxscrollbar.js"></script> <script src="~/jqwidgets/jqxlistbox.js"></script> <script src="~/jqwidgets/jqxinput.js"></script> <script src="~/jqwidgets/jqxdropdownlist.js"></script> <script src="~/jqwidgets/jqxcombobox.js"></script> <script src="~/jqwidgets/jqxtoolbar.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers @{ ViewData[ "Title"] = "ASP .NET MVC Toolbar Example"; } <style type="text/css"> .buttonIcon { margin: -5px 0 0 -3px; width: 16px; height: 17px; } </style><script> function initTools (type, index, tool, menuToolIninitialization) { var theme = ""; if (type == "toggleButton") { var icon = $( "<div class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-" + theme + " buttonIcon'></div>"); } switch (index) { case 0: icon.addClass( "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-" + theme); icon.attr( "title", "Bold"); tool.append(icon); break; case 1: icon.addClass( "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-" + theme); icon.attr( "title", "Italic"); tool.append(icon); break; case 2: icon.addClass( "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-" + theme); icon.attr( "title", "Underline"); tool.append(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", function () { var 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: var button = $( "<div>" + "<img src='../../images/administrator.png' title='Custom tool' />" + "</div>"); tool.append(button); button.jqxButton({ height: 15 }); break; } } </script><jqx-tool-bar id="toolbar" instance="getInstance()" initTools="initTools()" tools="toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom" width="800" height="35"></jqx-tool-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) { var result = instance[ "getTools"]();
|
render
|
Method
|
|
<script src="~/jqwidgets/jqxbuttons.js"></script> <script src="~/jqwidgets/jqxscrollbar.js"></script> <script src="~/jqwidgets/jqxlistbox.js"></script> <script src="~/jqwidgets/jqxinput.js"></script> <script src="~/jqwidgets/jqxdropdownlist.js"></script> <script src="~/jqwidgets/jqxcombobox.js"></script> <script src="~/jqwidgets/jqxtoolbar.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers @{ ViewData[ "Title"] = "ASP .NET MVC Toolbar Example"; } <style type="text/css"> .buttonIcon { margin: -5px 0 0 -3px; width: 16px; height: 17px; } </style><script> function initTools (type, index, tool, menuToolIninitialization) { var theme = ""; if (type == "toggleButton") { var icon = $( "<div class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-" + theme + " buttonIcon'></div>"); } switch (index) { case 0: icon.addClass( "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-" + theme); icon.attr( "title", "Bold"); tool.append(icon); break; case 1: icon.addClass( "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-" + theme); icon.attr( "title", "Italic"); tool.append(icon); break; case 2: icon.addClass( "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-" + theme); icon.attr( "title", "Underline"); tool.append(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", function () { var 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: var button = $( "<div>" + "<img src='../../images/administrator.png' title='Custom tool' />" + "</div>"); tool.append(button); button.jqxButton({ height: 15 }); break; } } </script><jqx-tool-bar id="toolbar" instance="getInstance()" initTools="initTools()" tools="toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom" width="800" height="35"></jqx-tool-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) {
|
refresh
|
Method
|
|
<script src="~/jqwidgets/jqxbuttons.js"></script> <script src="~/jqwidgets/jqxscrollbar.js"></script> <script src="~/jqwidgets/jqxlistbox.js"></script> <script src="~/jqwidgets/jqxinput.js"></script> <script src="~/jqwidgets/jqxdropdownlist.js"></script> <script src="~/jqwidgets/jqxcombobox.js"></script> <script src="~/jqwidgets/jqxtoolbar.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers @{ ViewData[ "Title"] = "ASP .NET MVC Toolbar Example"; } <style type="text/css"> .buttonIcon { margin: -5px 0 0 -3px; width: 16px; height: 17px; } </style><script> function initTools (type, index, tool, menuToolIninitialization) { var theme = ""; if (type == "toggleButton") { var icon = $( "<div class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-" + theme + " buttonIcon'></div>"); } switch (index) { case 0: icon.addClass( "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-" + theme); icon.attr( "title", "Bold"); tool.append(icon); break; case 1: icon.addClass( "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-" + theme); icon.attr( "title", "Italic"); tool.append(icon); break; case 2: icon.addClass( "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-" + theme); icon.attr( "title", "Underline"); tool.append(icon); break; case 3: tool.jqxToggleButton({ width: 80, toggled: true }); tool.text( "Enabled"); tool.on( "click", function () { var 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: var button = $( "<div>" + "<img src='../../images/administrator.png' title='Custom tool' />" + "</div>"); tool.append(button); button.jqxButton({ height: 15 }); break; } } </script><jqx-tool-bar id="toolbar" instance="getInstance()" initTools="initTools()" tools="toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom" width="800" height="35"></jqx-tool-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) {
|