JQueryUI is selectable: you cannot apply a theme to the selected item (class "ui-selected")

Question

I am developing an application using jQueryUI. I also use Themeroller. I want to have as many of my styles as possible with a theme, so if I need to change some styles, I just need to create a new custom theme (or load an existing theme).

I am trying to use "selectable" interaction in jQueryUI. It works as it should - in Firebug I see that the "ui-selected" class is applied to the element that I select. However, there is no visual clue that the item has been selected. I looked at the CSS file (jquery-ui-1.8rc3.custom.css that I downloaded from Themeroller page ) and I do not see the declaration for the class "ui-selected". When I downloaded jQueryUI and the theme, I checked every parameter, including one for selectable.

How can I make my theme a class definition of "ui-selected"? Obviously, I could just create my own style declaration, but this solution is not perfect if I ever want to change the theme.

I am using jQuery 1.4.2 and jQueryUI 1.8rc3.

Answer 1

Sorry, the answer sucks, but you cannot.

This is the functionality ThemeRoller was supposed to add, and you can't do anything to automatically add the generated styles to it.

If you look at the demo pages , they will also manually make style declarations for.ui-selected

Answer 2

You can dynamically set ui classes as follows:

$("#selectable ul").selectable({
  unselected: function(){
    $(".ui-state-highlight", this).each(function(){
      $(this).removeClass('ui-state-highlight');
    });
  },
  selected: function(){
    $(".ui-selected", this).each(function(){
      $(this).addClass('ui-state-highlight');
    });
  }
});
$("#selectable li").hover(
  function () {
    $(this).addClass('ui-state-hover');
  }, 
  function () {
    $(this).removeClass('ui-state-hover');
  }
);