jQuery CSS themeroller

Question

I want to take an icon from the jQuery Themeroller and implement it as a button. Then, when I click the icon, it toggles between one color and another color. This is in Ruby on Rails. How should I do this?

Answer 1

This is front-end code, so it's pretty much all JS/jQuery, what you're trying to accomplish has nothing to do with Rails.

The icons are separate classes, for example .jquery-ui-wrench.

One way to do it is:

<div id="some_button" class="jquery-ui-wrench"></div>

And then somewhere:

$('#some_button').click(function(){
  // Code to toggle button, probably 
  $('#some_button').removeClass('jquery-ui-wrench');
  $('#some_button').addClass('colored-version-of-icon');
});

Including, as per comment

Once you've downloaded your custom theme + jQuery UI from the site, extract the .js files into your public/javascripts, then the css stylesheet into public/stylesheets, and the images into public/images. Edit the css file and replace all occurances of images with /images. (This is to ensure it points to the images folder correctly)

Then simply include the stylesheet and javascript file in your layout, and you should be able to start using it.