Come applicare più temi jQuery UI

Question

Qualcuno ha qualche tecniche / suggerimenti / trucchi per aiutarmi a organizzare e realizzare più temi jQuery UI in una sola applicazione?

Ho portato a usare !important come sembra essere il modo più sicuro per le sostituzioni di stile la forza - ma questo metodo non è molto desiderabile

.

Answer 1

Sì, ma dipende da cosa si intende.

diciamo Let desideri elemento A per essere in stile con il tema X, e l'elemento B con tema Y. jQuery Roller a tema ha questa caratteristica costruita nel Quando si va a scaricare un tema ( qui ), fai clic su Impostazioni avanzate a tema a destra. Qui, è possibile impostare il "Ambito CSS". Questo vi permetterà di applicare le classi di jQuery UI (cioè ui-corners-all, etc.) da un tema specifico. Ecco la descrizione che danno per questa opzione:

  

Questo campo permette di specificare un CSS   scopo di limitare il vostro tema a un   particolare porzione di una pagina. Questo è   utile quando si utilizzano più i temi su   una pagina. Se non si fornisce un CSS   campo di applicazione, il tema si applicherà a tutti UI   elementi di una pagina.

     

Nella maggior parte dei casi, non sarà necessario   specificare un ambito CSS. Nota: se   si fornisce un ambito CSS, non sarà   ottenere una pagina di esempio incluso nel tuo   download.

Si può anche cambiare il Tema Nome cartella :

  

Questo campo permette di specificare un   nome per la cartella del tema nella vostra   Scaricare. Questo è utile se si intende   utilizzare più temi in una pagina. esso   default "a tema".

Se, tuttavia, si desidera creare un nuovo tema, prendendo in prestito i pezzi tra diversi temi, ci sono due possibilità: modificare i file CSS e immagine di voi stessi (non raccomandato), oppure utilizzare lo strumento Roller a tema per creare la tua proprio.

Come utilizzare:

CSS Scope è solo un selettore CSS. Diciamo che il tema X dovrebbe applicarsi solo a tutti gli elementi con class aClass. In questo caso, il vostro ambito CSS sarebbe .aClass. Quindi, se si desidera aggiungere gli angoli arrotondati dal tema X ad un elemento (supponendo che l'Ambito CSS è stato impostato su .aClass), il codice HTML vorrebbe qualcosa di simile:

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

Answer 2

si avrà alcuni problemi se si applica questa tecnica per ui widget che overlay e vengono aggiunte al corpo - finestra di dialogo, datepicker, completamento automatico ....

nel caso di completamento automatico, è possibile effettuare le seguenti operazioni per ottenere un elemento padre con la classe di ambito -. L'aggiunta della classe scopped alla UL del completamento automatico per sé non è sufficiente

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

Answer 3

Hey - cercato per ore, e finalmente trovato il modo di farlo dal FilamentGroup, completo di tutorial e esempi di lavoro
. http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/