jQuery UI Widgets Forums Navigation NavigationBar, ToolBar, NavBar pressing a button as I can change the image of another button

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

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

  • pepe
    Participant

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

    <link type=”text/css” rel=”Stylesheet” href=”jqwidgets/jqwidgets/styles/jqx.base.css” />
    <link type=”text/css” rel=”stylesheet” href=”jqwidgets/jqwidgets/styles/jqx.arctic.css” />

    <style type=”text/css”>
    .buttonIcon
    {
    margin: -5px 0 0 -2px;
    width: 18px;
    height: 17px;
    }
    </style>
    <script type=”text/javascript” src=”jqwidgets/scripts/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxtoolbar.js”></script>
    <script type=”text/javascript” src=”jqwidgets/scripts/demos.js”></script>
    <script src=”js/eventPause.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    $(“#jqxToolBar”).jqxToolBar({ width: 600, height: 50, theme: ‘arctic’, tools: ‘toggleButton toggleButton ‘,
    initTools: function (type, index, tool, menuToolIninitialization) {
    var icon = $(“<div class=’jqx-editor-toolbar-icon jqx-editor-toolbar-icon-” + theme + ” buttonIcon’></div>”);
    switch (index) {

    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>


    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/


    pepe
    Participant

    Hi Dimitar, the answer was perfect. a greeting

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

You must be logged in to reply to this topic.