Comment appliquer plusieurs thèmes jQuery UI

Question

Est-ce que quelqu'un a des techniques / conseils / astuces pour me aider à organiser et mettre en œuvre plusieurs thèmes jQuery UI dans une application?

Je l'ai donné à utiliser !important comme il semble être le meilleur moyen de remplacements de style de force - mais cette méthode n'est pas très souhaitable

.

Answer 1

Oui, mais cela dépend de ce que vous voulez dire.

Le mot Let vous voulez l'élément A portant le titre avec le thème X, et l'élément B avec le thème Thème Y. jQuery Rouleau a cette fonctionnalité intégrée dans Quand vous allez télécharger un thème ( ici ), cliquez sur Paramètres thème avancé à droite. Ici, vous pouvez définir le « Champ CSS ». Cela vous permettra d'appliquer les classes jQuery UI (à savoir ui-corners-all, etc.) à partir d'un thème spécifique. Voici la description qu'ils donnent à cette option:

  

Ce champ vous permet de spécifier un CSS   de limiter la portée de votre thème à un   partie particulière d'une page. C'est   utile lorsque vous utilisez plusieurs thèmes sur   une feuille. Si vous ne fournissez pas de CSS   la portée, votre thème s'appliquera à toute l'interface utilisateur   éléments sur une page.

     

Dans la plupart des cas, vous ne devez   spécifier un champ CSS. S'il vous plaît Note: Si   vous fournissez un champ CSS, vous ne serez pas   obtenir une page d'exemple inclus dans votre   téléchargement.

Vous pouvez également modifier le Thème Nom du dossier :

  

Ce champ vous permet de spécifier un   le nom du dossier thématique dans votre   Télécharger. Ceci est utile si vous prévoyez   d'utiliser des thèmes multiples sur une page. Il   par défaut "thème".

Si, cependant, vous voulez créer un thème nouveau, les bits d'emprunt et des morceaux de plusieurs thèmes, vous avez deux options: modifier les fichiers CSS et images vous-même (non recommandé), ou utilisez l'outil Roller Thème pour créer votre propre.

Comment utiliser:

Portée CSS est juste un sélecteur CSS. Disons que le thème X devrait s'appliquer uniquement à tous les éléments avec la classe aClass. Dans ce cas, votre portée CSS serait .aClass. Donc, si vous voulez ajouter des coins arrondis du thème X à un élément (en supposant que votre portée CSS a été mis à .aClass), votre code HTML aimerait quelque chose comme ceci:

<div class='ui-rounded-corners aClass'>
    Content    
</div>

Answer 2

vous aurez des problèmes si vous appliquez cette technique ui widgets superposition et sont ajoutés au corps - dialogue, datepicker, autocomplete ....

dans le cas de saisie semi-automatique, vous pouvez effectuer les opérations suivantes pour obtenir un élément parent avec la classe scope -. Ajouter la classe scopped à l'UL de la saisie semi-automatique est lui-même ne suffit pas

jQuery('.autocomplete').autocomplete({
    source: function(request, response){
        {....}
    },
    create: function(event, ui) {
        jQuery('.ui-autocomplete').wrap('<span class="xxSCOPPEDCLASSxx"></span>');
    }
});

Answer 3

Hey - recherché pendant des heures, et a finalement trouvé la façon de le faire à partir du FilamentGroup, avec tutoriel et des exemples de travail
. http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/