jQuery ile Stil Değiştirici

Aslında başlık biraz havada kaldı. Bu makalede tam olarak yapmak istediğimiz şey websitemizin css kodlarının bulunduğu dosyayı jQuery yardımıyla başka bir dosya ile değiştirmek. Böylece XHTML, Css tabanlı tasarımımız sadece css kodları değişimiyle farklı bir renge ve/veya görünüme kavuşmuş olacak…

Uzun süre aradan sonra yeni bir tasarım yapmaya karar verdim. Bu tasarımı yaparkende jQuery nin nimetlerinden yararlanmak istedim. jQuery ile ilgili araştırma yaparken karşıma çıkan ve bence muhteşem bir kullanım olan [url=http://www.kelvinluck.com/2006/05/switch-stylesheets-with-jquery/][b]Switch stylesheets with jQuery[/b][/url] konusu ile karşılaştım ve burada Türkçe olarak tanıtmak istedim.

[url=http://www.kelvinluck.com/assets/jquery/styleswitch/styleswitch.zip]Buradan[/url] gerekli dosyaları indiriyoruz.

.zip uzantılı dosyadaki sıkıştırılmış dosyaları bir yere çıkartıyoruz. Bu dosyalardan bizim işimize yarayacak olanlar aşağıdakilerdir:
jquery.js
styleswitch.js

Aslında jquery.js dosyasını www.jquery.com adresinden de son sürüm olarak indirebilirsiniz. Böylece başka jQuery kullanmak yerlerde daha yeni ve hızlı çözümlere ulaşmanız mümkün olacaktır.

Şimdi bu js dosyalarını tasarımımızda nasıl kullanacağımızı öğrenelim:
Öncelikle bu .js uzantılı dosyaları HTML’de sayfamıza dahil etmemiz gerekiyor. Bunun için  tagları arasına aşağıdaki kodu sitemize göre düzenleyip ekliyoruz:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="styleswitch.js"></script>

Sırada ise css kodlarımızın bulunduğu dosyaları eklemekte. Yine aynı şekilde bu dosyaları da sayfamıza dahil etmek için aşağıdaki kodları  arasına ekliyoruz.

<link rel="stylesheet" type="text/css" href="styles1.css" title="styles1" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="styles2.css" title="styles2" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="styles3.css" title="styles3" media="screen" />

Yukarıdaki koddaki title açıklamalarının isimlerine dikkat ediniz. Çünkü farklı stillere geçmek için link verdiğimiz zaman bu title isimlerini linklerimizde rel açıklaması olarak kullanacağız.

Son olarakta stil dosyalarımıza geçişi sağlamak için linkleri vermemiz gerekiyor. Bunu yapmak içinde HTML kodlarımızdaki  tagları arasında uygun gördüğümüz yere aşağıdaki kodları kendi sayfamıza göre düzenleyip ekliyoruz:

<a href="#" rel="styles1" class="styleswitch">styles1</a>
<a href="#" rel="styles2" class="styleswitch">styles2</a>
<a href="#" rel="styles3" class="styleswitch">styles3</a>

Eğer anlatımda bir hata olduğunu düşünüyorsanız ya da kullanım ile ilgili herhangibir sorununuz varsa yorum yazarak bana ulaşabilirsiniz.