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');

Answer 2

Have you been to themeroller? There you can try out different styles.

Adding a Custom Theme

Another good way to customize a jQuery Mobile button is adding a custom theme.

<a data-role="button" data-theme="my-site">Button</a>

That will give you more control over the different elements and states of the button. For instance, you can target different states of the button in CSS by writing the code for the class associated with your custom theme name (they are automatically added to the button):

.ui-btn-up-my-site { /* your code here */ }
.ui-btn-hover-my-site { /* your code here */ }
.ui-btn-down-my-site { /* your code here */ }

Keep in mind that the default buttons are made out of borders, shadows, and of course the background gradient. In addition to this, there are other HTML elements inside the button that are automatically generated by the framework. Depending on what exactly you want to customize you might need to target other classes within the button (i.e. ui-icon, ui-btn-text, ui-btn-inner, etc).

Otherwise I could recommend you this site

http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/