| disabled | bool | false |
|
Sets or gets the <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 <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 <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 <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 <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 <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 <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 <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 <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 <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>
|
||
Events |
||
| close | Event | |
Code examples
Bind to the
<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) {
}
</script>
}
|
||
| open | Event | |
Code examples
Bind to the
<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) {
}
</script>
}
|
||
Methods |
||
| 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);
}
</script>
}
|
||
| 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);
}
</script>
}
|
||
| 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) {
instance["destroy"]();
}
</script>
}
|
||
| 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);
}
</script>
}
|
||
| 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"]();
}
</script>
}
|
||
| 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) {
instance["render"]();
}
</script>
}
|
||
| 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) {
instance["refresh"]();
}
</script>
}
|
||