jQueryUI sélectionnable: impossible d'appliquer le thème à l'élément sélectionné (classe "ui-selected")

Question

Je développe une application en utilisant jQueryUI. J'utilise aussi le Themeroller. Je souhaite que le plus grand nombre de mes styles soit défini en utilisant le thème, de sorte que si j'ai besoin de changer certains styles, je dois simplement créer un nouveau thème personnalisé (ou télécharger un thème existant). J'essaie d'utiliser l'interaction «sélectionnable» dans jQueryUI. Il fonctionne comme il se doit - dans Firebug, je peux voir la classe "ui-selected" appliquée à l'élément que je sélectionne. Cependant, il n'y a aucune indication visuelle que l'élément a été sélectionné. J'ai regardé dans le fichier CSS de thème (jquery-ui-1.8rc3.custom.css, que j'ai téléchargé à partir du Themeroller page), et je ne vois aucune déclaration pour la classe "ui-selected". Quand j'ai téléchargé jQueryUI et le thème, j'ai vérifié chaque option, y compris celle pour "sélectionnable".

Comment puis-je faire en sorte que mon thème définisse la classe "ui-selected"? Évidemment, je pourrais juste créer ma propre déclaration de style, mais cette solution n'est pas idéale si jamais je veux changer le thème. J'utilise jQuery 1.4.2 et jQueryUI 1.8rc3.

Answer 1

Désolé la réponse est nulle, mais vous ne pouvez pas.

C'est une fonctionnalité que le ThemeRoller aurait dû ajouter, rien que vous puissiez faire pour l'ajouter automatiquement à ses styles générés.

Si vous regardez le demo pages, ils font aussi manuellement les déclarations de style pour .ui-selected

Answer 2

Vous pouvez définir dynamiquement les classes ui comme ceci:

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