jQuery UI Widgets Forums Editors Button, RepeatButton, ToggleButton, LinkButton toggle button change background color when receiving and losing focus

This topic contains 3 replies, has 2 voices, and was last updated by  Hristo 3 days, 2 hours ago.

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

  • pepe
    Participant

    Good night, I have the following problem:
    When the button is in toggle off and receives the focus I need to change the background color (to light blue) and when I lose focus, change the background color to gray.

    A greeting.

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title>jQuery Toggle Button Sample1</title>
    <meta name=”keywords” content=”jQuery, Button, Toggle Button, Repeat Button, Link Button, Help Documentation” />
    <link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
    <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>
    </head>

    <body class=’default’>
    <div id=’content’>
    <script type=”text/javascript”>
    $(document).ready(function () {
    $(“#boton1”).jqxToggleButton({
    width: ‘150’,
    height: ’25’,
    });

    $(“#boton2”).jqxToggleButton({
    width: ‘150’,
    height: ’25’,
    });

    $(“#pepe”).trigger(‘focus’);

    });
    </script>

    <style>
    .jqx-fill-state-normal{
    background-color:#CCC;
    }

    .jqx-fill-state-hover{
    background-color: #6DA1F7;
    }

    .jqx-fill-state-focus{
    background-color: #6DA1F7;
    }

    .jqx-fill-state-pressed{
    background-color: #0065BA;
    }
    </style>

    <div style=’width: 150px;’ id=’jqxWidget’>
    <div>
    <input type=”button” value=”Boton 1″ id=’boton1′ tabindex=”1″/>
    </div>
    <div>
    <input type=”button” value=”Boton 2″ id=’boton2′ tabindex=”2″/>
    </div>
    </div>
    </div>
    </body>
    </html>


    Hristo
    Participant

    Hello pepe,

    I tested this example and it seems to work fine.
    Could you clarify it?

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    pepe
    Participant

    Good morning Hristo, thanks for the answer but it’s not what I’m looking for.
    What I intend is that when I use the tab key to move from one button to another and the button receives the focus I change the background color whenever this toggle is off.
    Thank you


    Hristo
    Participant

    Hello pepe,

    I would like to suggest you try to use the native methods to get the active element and change the background-color of the current element.
    Please, take a look at this example.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.