jQuery UI Widgets Forums Navigation NavigationBar, ToolBar, NavBar Toolbar using jqxToggleButton

This topic contains 1 reply, has 2 voices, and was last updated by  svetoslav_borislavov 8 months, 2 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Toolbar using jqxToggleButton #133468

    ajcs
    Participant

    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?

    Toolbar using jqxToggleButton #133469

    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/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.