pressing a button as I can change the image of another button - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Button, change, image, jqxToolBar, toggle button, toggleButton, tool, toolbar

This topic contains 2 replies, has 2 voices, and was last updated by pepe 9 years, 9 months ago.

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

Author

pressing a button as I can change the image of another button Posts

March 8, 2015 at 1:22 am pressing a button as I can change the image of another button #68170

pepe

Participant

<!DOCTYPE html>
<html lang=”en”>
<head>

case 0:

tool.jqxToggleButton({ width: 60,});

tool.css({“background-image”: “url(imagenes/anadir.png)”,
“background-position”: “center”,
“background-repeat”: “no-repeat”,
“background-size”: “25px 25px”,
});

tool.on(“click”, function () {
$(“#jqxToolBar”).jqxToolBar(“disableTool”, 1, true);
});

break;

case 1:
tool.jqxToggleButton({ width: 60,});

tool.on(“click”, function () {
$(“#jqxToolBar”).jqxToolBar(“disableTool”, 0, true);
});

tool.css({“background-image”: “url(imagenes/modificar.png)”,
“background-position”: “center”,
“background-repeat”: “no-repeat”,
“background-size”: “25px 25px”,
});

break;

}
}
});
});
</script>
</head>
<body>
<div id=”jqxToolBar”>
</div>
</body>
</html>

March 9, 2015 at 6:27 am pressing a button as I can change the image of another button #68175

Dimitar

Participant

Hello pepe,

Here is an example that shows how to change the image of one toolbar button when another one is clicked:

<!DOCTYPE html>
<html lang="en">
<head>
    <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <style type="text/css">
        .buttonIcon
        {
            margin: 0;
            width: 16px;
            height: 17px;
        }
    </style>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var button1, button1Min, button2, button2Min;

            $("#jqxToolBar").jqxToolBar({
                width: 800, height: 35, tools: 'toggleButton 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:
                            if (menuToolIninitialization === false) {
                                button1 = tool;
                            } else {
                                button1Min = tool;
                            }

                            icon.css('background-image', 'url("../../images/austria.png")');
                            tool.append(icon);
                            break;
                        case 1:
                            if (menuToolIninitialization === false) {
                                button2 = tool;
                            } else {
                                button2Min = tool;
                            }

                            icon.css('background-image', 'url("../../images/argentina.png")');
                            tool.append(icon);
                            break;
                    }
                }
            });

            button1.add(button1Min).click(function () {
                var toggled = button1.jqxToggleButton('toggled');
                if (toggled === true) {
                    button2.add(button2Min).find('div').css('background-image', 'url("../../images/canada.png")');
                } else {
                    button2.add(button2Min).find('div').css('background-image', 'url("../../images/argentina.png")');
                }
            });
        });
    </script>
</head>
<body>
    <div id="jqxToolBar">
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

March 9, 2015 at 4:28 pm pressing a button as I can change the image of another button #68221

pepe

Participant

Hi Dimitar, the answer was perfect. a greeting

Author

Posts

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

You must be logged in to reply to this topic.