0

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...

Nicsoft
  • 3,644
  • 9
  • 41
  • 70

1 Answers1

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

CodingIntrigue
  • 75,930
  • 30
  • 170
  • 176
  • Ok, I'll try that. But I don't need to include both version of the 'ui'-files, do I? – Nicsoft Mar 29 '12 at 13:56
  • You need to include the .js and .css files from the jquery-ui folder as well as the jquery .js file – CodingIntrigue Mar 29 '12 at 14:09
  • Ok, thanks. Your solution works when I made a small test implementation. Now I just need to figure out why it doesn't work in may main project... – Nicsoft Mar 29 '12 at 14:22
  • I think I know why it doesn't work in my main project, all content is dynamically loaded. How do I do the binding for the .button()? – Nicsoft Mar 29 '12 at 15:19
  • 1
    If your content is dynamically loaded, you need to call the .button() event each time your content changes – CodingIntrigue Mar 29 '12 at 15:25