Toolbar using jqxToggleButton

[ajcsParticipant]

I am using jqxToggleButton as a control on the jqxToolBar but I want the button to have a different color background than that of the toolbar.

I have tried assigning a different theme to the button but this seems to be initially ignored and then when I click anywhere on the page the button theme then appears and the button is the correct color. Also if I hover the mouse over the button and move off then after the hover the button is the correct color.

If I try a jqxButton instead and assign a theme then this them is ignored in favour of the toolbar theme because I see that the css is in the wrong order and the toolbar theme css is applied after it.

So what is the correct way to have buttons on the toolbar in a different color please?

[svetoslav_borislavovParticipant]

Hi,

You may try the following code,
$(document).ready(function () {
$(“#toolbar”).jqxToolBar({
width: 200,
height: 60,
tools: ‘toggleButton’,
initTools: function (type, index, tool, menuToolIninitialization) {
if (type == “toggleButton”) {
var icon = $(“<div class=’jqx-editor-toolbar-icon jqx-editor-toolbar-icon-” + theme + ” buttonIcon’></div>”);
}
switch (index) {
case 0:
tool.jqxToggleButton({
width: 80,
toggled: true,
theme: ‘darkblue’
});
tool.text(“Enabled”);
tool.on(“click”, function () {
var toggled = tool.jqxToggleButton(“toggled”);
if (toggled) {
tool.text(“Enabled”);
} else {
tool.text(“Disabled”);
}
});
break;
}
}
});
});

It successfully changes the theme of the button
Note that you have to import the selected theme, in the example the following one is imported:
<link rel=”stylesheet” href=”./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.darkblue.css”>

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts