2010-11-22 8 views
0

Ich versuche einen Weg zu finden Stylesheets basierend auf der Jahreszeit mit jquery zu ändern, da zu diesem Zeitpunkt noch nicht bekannt ist, ob ich PHP oder Ruby überhaupt auf dieser Seite verwenden kann . Danke für deine Antworten!Stylesheet basierend auf Monat/Saison in jQuery ändern

+2

Es wäre wirklich bestes Server-Side-Scripting zu verwenden, um dies zu tun, denn das neue Stylesheet nur * nachdem der gesamte DOM * geladen geladen werden, und bis dahin sollte der Rendering-Prozess bereits begonnen hat, so Das Laden einer großen Anzahl von Änderungen würde diesen Prozess stören und Flash von unbestätigtem Inhalt verursachen. –

Antwort

0

Ich würde vorschlagen, dass Sie die Elemente eingrenzen, die Sie auf der Seite ändern möchten, da die CSS-Datei bereits geladen wäre und jQuery nur die CSS anwenden würde, nachdem die statische CSS geladen wurde. Sie könnten diese spezifischen Stildeklarationen aus dem CSS herauslassen oder sie als Standard beibehalten. Wenn sich beispielsweise das Hintergrundbild ändert, können Sie es in der Standard-css-Deklaration auf Weiß setzen. Auf diese Weise sieht es beim Laden normal aus und Sie verwenden nur JavaScript, um die erforderlichen Elemente zu laden.

Sie könnten dann die JavaScript-Monats-Funktion verwenden, um den aktuellen Monat

var month = new Date(); 
month = month.getMonth(); 

Dann bekommen Sie jQuery verwenden könnten, um diese Stile auf den Kopf mit der jQuery-Ready-Funktion anzuwenden. Sie können einen einfachen Schalter der if/else-Anweisung verwenden, um abhängig von der Monatszahl eine von vier Anweisungen auszuwählen. Zum Beispiel, wenn Sie den Hintergrund

$("head").append("<style type=\"text/css\">body {background-color: #FFF !important;}</style>"); 

Nur ein kleines Beispiel zu ändern, aber es wäre es effizienter machen als ein ganzes Blatt Laden denke ich.

0

setzen alle Ihre Erklärungen in einer CSS in Form von

.someStyle{ color:blue;}  
.summer .someStyle{color:yellow;} 
.winter .someStyle{color:purple;} 
... 

alle Klassen unter .summer den Standardstil für den Sommer
dann auf dem Server/Client außer Kraft setzen, wenn die Seite fertig ist - fügen Sie diese Klasse zum Körper

das einzige Problem mit tun es auf dem Client ist, dass der Standard-Stil zuerst rendern und dann auf den neuen wechseln (wählen Sie einfach die Saison am häufigsten für die Benutzer Ihrer Website - wenn es Israel wäre ich würde wähle Sommer ;-)

2

Am einfachsten ist es, Ihre CSS-Stile zu erweitern und eine Klasse auf hoher Ebene hinzuzufügen. Normalerweise mache ich das bei Körper Element. Die CSS wie folgt aussieht:

body.summer ul { background-color: green; } 
body.fall ul { background-color: orange; } 
body.winter ul { background-color: white; } 
body.spring ul { background-color: pink; } 

Dann JS verwenden, um die Körper-Klasse festlegen:

...</body> 
<script ...> 
var season = (new Date()).getMonth...; 
$('body').addClass(season); 
</script> 
</html> 

Wie Sie sehen können, habe ich nach dem Schließen des Body-Tag diese sofort platziert. Ich denke, das ist der erste Ort, wo man es hinstellen und es zur Arbeit bringen kann, aber man muss es überprüfen. Der Grund, dies hier zu tun, ist, das Aufblitzen unsterblichen Inhalts zu verhindern - wenn Sie auf der Seite viel los haben, wollen Sie dieses Javascript vor dem bereitstehenden Rückruf ausführen. Davon abgesehen hatte ich eigentlich kein Problem damit, den Großteil meines Codes in den Bereitschaftsrückruf zu stellen.

Sie können auch verschiedene Stylesheets einfach laden - wahrscheinlich am selben Ort. Erstellen Sie einfach einen Stilknoten und fügen Sie ihn als letzten Knoten in den Kopf ein. Sie würden dies tun, wenn Sie große Unterschiede zwischen Ihren Stilen haben. Ziemlich schwierig zu pflegen.

$("head").append("<style type=\"text/css\" src=\"" + season + ".css\"">"); 
Verwandte Themen