Jak zastosować wiele motywów jQuery UI

Question

Czy ktoś ma jakieś techniki/wskazówki/porady, które pomogą mi zorganizować i wdrożyć wiele tematów JQuery UI w jednej aplikacji?

I doprowadziły do ​​korzystania !important gdyż wydaje się być najpewniejszym sposobem wymuszenia nadpisania stylu - ale ta metoda nie jest bardzo pożądane.

Answer 1

Tak, ale to zależy od tego, co masz na myśli.

Powiedzmy chcesz elementem A do być stylizowany z Theme X i elementu B z tematu Y. jQuery Theme Roller posiada tę funkcję wbudowaną. Kiedy idziesz do pobrania motyw (here), kliknij Zaawansowane ustawienia tematyczne po prawej. Tutaj możesz ustawić "Zakres CSS". Umożliwi to zastosowanie klas jQuery UI (tj. ui-corners-all itp.) Z określonego motywu. Oto opis dają tej opcji:

To pole pozwala na określenie zakresu CSS ograniczyć swój temat do konkretnej części strony. To jest pomocne przy użyciu wielu motywów na stronie . Jeśli nie podasz zakresu CSS , Twój motyw zostanie zastosowany do wszystkich elementów interfejsu użytkownika na jednej stronie.

W większości przypadków nie trzeba określać zakresu CSS za pomocą . Uwaga: Jeśli podasz zakres CSS, , nie pobierzemy przykładowej strony z Twojej .

Można również zmienić Theme Nazwa folderu:

To pole pozwala określić nazwę folderu temat w pobrania. Jest to przydatne, jeśli planujesz używać wielu motywów na stronie. Domyślnie jest to "motyw".

Jeśli jednak chcesz utworzyć nowy temat, pożyczanie kawałki z kilku tematów, masz dwie opcje: edytowanie CSS i pliki obrazów siebie (nie zalecane), lub użyć narzędzia Theme Roller tworzyć własne.

Jak korzystać:

CSS Zakres tylko selektor CSS. Załóżmy, że motyw X powinien dotyczyć tylko wszystkich elementów z klasą aClass. W takim przypadku Twój zakres CSS będzie wynosił .aClass. Tak więc, jeśli chcesz dodać zaokrąglone narożniki z motywu X do elementu (zakładając, że Twój CSS zakres został ustawiony .aClass), twój HTML chciałby coś takiego:

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

Answer 2

Hey - przeszukiwane przez kilka godzin, a wreszcie znaleźć sposób, aby to zrobić z FilamentGroup, wraz z samouczkiem i przykładami pracy.
http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/

Answer 3

będziesz miał pewne problemy, jeśli stosuje się tę technikę do ui widgetów że nakładka i są załączone do ciała - Dialog, datepicker, autouzupełnianie ....

w przypadku autouzupełniania można wykonać następujące czynności, aby uzyskać element macierzysty z klasą zakresu - dodanie samej klasy do UL samego autouzupełniania nie jest wystarczające.

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