jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by Hristo 5 years, 7 months ago.

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

Author

toggle button change background color when receiving and losing focus Posts
September 11, 2019 at 8:57 pm toggle button change background color when receiving and losing focus #106727

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>

September 12, 2019 at 8:20 am toggle button change background color when receiving and losing focus #106738

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

September 12, 2019 at 10:29 am toggle button change background color when receiving and losing focus #106741

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

September 16, 2019 at 10:07 am toggle button change background color when receiving and losing focus #106770

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
Author

Posts

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

You must be logged in to reply to this topic.