jQuery mobile button pressed behavior

Question

I have a link button with jQuery mobile. I want to be able to set it to be constantly pressed or unpressed. I tried this code for pressed:

$(this).css('background-color', '#e0e0e0');

and this code for unpressed:

$(this).css('background-color', '#f6f6f6');

But when hovering over the unpressed button it does not highlight anymore. So I tried:

$(this).addClass('ui-button-active');

But the button gets a blue color and I want dark gray color. Any suggestions?

Answer 1

In jQuery Mobile 1.4.2 CSS you can see that there are button styles for normal/hover/active states (for each theme), and an active style that changes the color of the button (to blue, in your case).

To simulate a "constantly pressed" button you have to add a class for each theme (a and b) based on the button :active class, and override background color:

.button-pressed-a { background-color: #e8e8e8 !important; }
.button-pressed-b { background-color: #404040 !important; }

Then, in your script, you can toggle the "pressed" state with:

$("#button").toggleClass('button-pressed-a');