jQuery wiele motywów na jednej stronie

To mnie napędza NUTS! Wcześniej śledziłem post, który po prostu nie działa: http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/jQuery wiele motywów na jednej stronie

Mam motyw bazowy, dla przykładu, ze względu na motyw Smoothness z galerii jQuery UI. Następnie mam "czerwony" motyw, który zasadniczo zmienia kolor na czerwony. Here is the theme I created.

Więc idę pobrać mój motyw. Wybierz Ustawienia zaawansowane, ustaw zakres na "czerwony", a nazwa folderu motywu na "czerwony" i pobierz. Przede wszystkim nie jestem całkowicie w 100% pewien, który folder mam skopiować do mojego projektu, czy jest to folder "development-bundle \ themes" (który zawiera mój czerwony folder) czy folder '\ css \ red'?

Próbowałem obu. Powyższy wpis sugeruje, że jeśli skopiuję folder z motywami i link do mojego motywu w css, zadziała, gdy dodaję klasę "czerwony" do elementu lub elementu opakowania. Więc mam związane tematy tak jak w moim pliku:

<link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" /> 
<link type="text/css" href="themes/red/jquery.ui.all.css" rel="stylesheet" />

Obciążenia tematycznych bazowych i działa cały Honkey doorey ale czerwony motyw nie. Mam przycisk stylizowany tak:

<input type="submit" id="btn" value="A submit button" class="red" />

Ja również próbowałem:

<div class="red"> 
    <input type="submit" id="btn" value="A submit button" /> 
</div>

Ani pracę. Po usunięciu linku do pliku css "themes/base/jquery.ui.all.css" przyciski nie są w ogóle stylizowane. Zwariowany! Wyciągam włosy. Gdzie się mylę? Z pewnością powinny one po prostu ułatwić pobieranie TYLKO folderu z motywami i odwoływać się do pliku ui.all.

Źródło

2010-06-01 lloydphillips

Nie próbowałem go, ale wiem, że jQuery może złamać małe rzeczy. Czy umieściłeś '.red' jako zakres, a nie tylko' czerwony'? Spróbuj także 'themes/red/ui.all.css" 'zamiast' themes/red/jquery.ui.all.css "'. – Skoder

Próbowałem .red wczoraj zanim napisałem i to nie pomogło (musiałem przejść i edytować plik css, który został utworzony przez themeroller, aby zmienić to wszystko na .red). Za chwilę spróbuję zmienić nazwę pliku i dam ci znać. – lloydphillips

Skoders prawo.

Musisz użyć identyfikatora elementu, klasy lub zmiennej w notacji JQuery.

Dla klasy: .class
dla ID: ID
dla zmiennej: stół

Lepiej wybrać drogę klasy, ponieważ nie jest to tylko bardziej elegancki niż inne, ale o wiele bardziej użyteczny (może być używany na wielu obiektach) i nie zepsuć żadnych elementów układu, takich jak divy czy tabele. W końcu zakres css justs dodaje podaną wartość do każdej definicji css. tj

.ui-icon { ... }

staje

.scope .ui-icon { ... }

Edit: Upewnij się, że włączone właściwej stylów, mam całość pracy z następującego kodu

<html> 
    <head> 
     <title>JQuery UI Theme Scope</title> 
     <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
     <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script> 
     <link type="text/css" href="css/red/jquery-ui-1.8.1.custom.css" rel="stylesheet" /> 
     <link type="text/css" href="css/default/jquery-ui-1.8.1.default.css" rel="stylesheet" /> 
    </head> 
    <body> 
     <input type="submit" class="ui-state-default ui-corner-all" value="Submit" /> 
     <div class="red"> 
      <input type="submit" class="ui-state-default ui-corner-all" value="Submit" /> 
     </div> 
    </body> 
</html>

Nie odwołują się do arkusza stylów w katalogu "development-bundle" użyj zamiast tego katalogu "css".

Źródło

2010-06-01 20:28:08

Używam klasy. Problem polega na tym, że nie mogę pobrać czerwonego zakresu i przesłonić motywu bazowego, ustawiając nazwę klasy. – lloydphillips

Zobacz moją edycję. –

Dodałem nową klasę css dla czerwonych ikon:

Icons 
---------------------------------- 


/* states and images */ 

.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } 
.ui-iconRed { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }

I tu też zmienić:

/* states and images */ 

.ui-icon { width: 16px; height: 16px; background-image:url(images/ui-icons_469bdd_256x240.png); } 

.ui-iconRed { width: 16px; height: 16px; background-image:url(images/ui-icons_470bdd_256x240.png); }

Mam folder z czerwonymi i niebieskimi obrazów. Kiedy chcę wziąć czerwony obrazek, po prostu odwołuję się do ikony klasy Red, tak:

<img class="ui-iconRed ui-icon-bullet" title="Vendido" style="float: left;" /> 

//if want a blue just put the normal icon like this: 

<img class="ui-icon ui-icon-bullet" title="Não vendido" style="float: left;" />

Źródło

2011-11-14 20:00:39

jQuery wiele motywów na jednej stronie

Odpowiedz

Powiązane problemy