jQueryUI selectable: can't apply theme to selected item (“ui-selected” class)

Question

I am developing an application using jQueryUI. I am also using the Themeroller. I want to have as many of my styles as possible defined using the theme, so that if I need to change some styles, I simply have to create a new custom theme (or download an existing theme).

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

How can I make my theme define the "ui-selected" class? Obviously, I could just create my own style declaration, but that solution is not ideal 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 can't.

This is functionality the ThemeRoller would have to have added, nothing you can do to add to it's generated styles automatically.

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

Answer 2

You can dynamically set the ui classes as this :

$("#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');
  }
);