jQuery

Question

'a göre stil sayfasını değiştirin

JQuery ile hangi mevsime bağlı olarak stil sayfalarını değiştirmenin bir yolunu bulmaya çalışıyorum, çünkü bu noktada php veya ruby'yi kullanabiliyorsam bilinmemektedir. . Yanıtlarınız için teşekkürler!

Answer 1

CSS dosyası zaten yüklendiğinden ve jQuery statik css yüklendikten sonra css'yi uygulayacağından, sayfada değiştirmek istediğiniz öğeleri daraltmanızı öneririm. Bu özel stil bildirimlerini css'den bırakabilir veya varsayılan olarak saklayabilirsiniz. Örneğin, arka plan resmi değişirse, varsayılan css bildiriminde bunu beyaza ayarlayabilirsiniz. Bu sayede, yükleme sırasında normal görünüyor ve sadece gerekli öğeleri yüklemek için JavaScript kullanıyorsunuz.

Daha sonra jQuery hazır fonksiyonu ile kafasına bu stilleri uygulamak için jQuery kullanabilirsiniz,

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

Sonra geçerli ay almak için JavaScript ay işlevini kullanabilirsiniz. Ay numarasına bağlı olarak dört ifadeden birini seçmek için if/else ifadesinin basit bir anahtarına sahip olabilirsiniz. Örneğin, bir geçmiş

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

Sadece hızlı bir örnek değiştirmek istiyor, ama bence tam bir sayfayı yükleme olmadığı kadar daha verimli hale olsaydı.

Answer 2

sayfa hazır olduğunda .summer altındaki tüm sınıfları sunucu/istemci üzerinde daha sonra yaz
için varsayılan stili geçersiz kılar

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

şeklinde az bir css tüm beyanlarını koymak - Bu eklenti

İstemcide yapmayla ilgili tek sorun, varsayılan stilin önce oluşturulacak ve daha sonra yeni olana geçmesidir (yalnızca sitenizin kullanıcılarının en yaygın olduğu sezonu seçin). yaz seçin ;-)

Answer 3

En basit olanı, CSS stillerinizi kapsamak ve yüksek düzeyde bir sınıf eklemek. Genelde bunu gövde öğesinde yapıyorum.

Sonra

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

, vücut sınıfını belirlemek için JS kullanmak:

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

Gördüğünüz gibi, ben hemen vücut etiketi kapattıktan sonra bu yer gibi CSS görünüyor. Bunu koyabildiğin ve işe alabildiğin ilk yer olduğunu düşünüyorum, ama kontrol etmen gerekecek. Buraya koymanın nedeni, kullanılmayan içeriğin flaşını engellemektir. Eğer sayfada çok şey varsa, bu Javascript'i hazır geri aramadan önce yürütmek isteyeceksiniz. Bu söylendiği gibi, kodumun çoğunu sadece hazır geri aramada çok fazla sorun yaşamamıştım.

Ayrıca farklı stil sayfalarını kolayca yükleyebilirsiniz - muhtemelen aynı yerde. Sadece bir stil düğüm oluşturun ve son düğüm olarak kafanın içine yerleştirin. Stilleriniz arasında büyük farklar varsa bunu yaparsınız. Korunması oldukça zor.

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