Question

I’m using jQuery’s Themeroller to create a style for my web application. I am trying to apply the style to my own custom button. However, the ui-state-hover class is not being applied.

I am adding the same classes in my code as I can see on the Themerollers page for that button-component. Here is my code as copied from firebug:

<button aria-disabled="false" role="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="button">
<span class="ui-button-text">Visa/Dölj filter</span>
</button>

I have included jquery-ui-1.8.18.custom.css and jquery-1.7.1.min.js files.

Is there anything more than above I need to think about when using themerollers?

This is very frustrating since I thought this was going to work out of the box. If this doesn’t work, I cannot use it since making it work takes more time than creating the style myself…

Answer 1

You don’t need to try and replicate the CSS classes, jQuery UI will add these for you. Try the following HTML:

<button id="button">Visa/Dölj filter</button>

And Javascript:

$(document).ready(function() {
  $("#button").button();
}

You’ll need to include jquery-ui-1.8.18.custom.css, jquery-ui-1.8.18.custom.min.js, and jquery-1.7.1.min.js