5 Aralık 2006 Salı

Aktif CSS Değiştirme

Web sitenize eklediğiniz CSS sheet'leri aktif olarak değiştirerek ziyaretçilerinizin farklı temaları sayfa yenilenmeden görebilmelerini sağlamak istermisiniz? bu yazıda bunu nasıl yapabileceğinizi anlatacağım.
Java script, CSS, ve HTML kullanacağımız bu örnek aslında oldukça basit, ancak internette pek örneği yok. O yüzden bunu yaparak ender bulununan bir site yapmış olacaksınız.
Şimdi başlayalım.
Örnek Dosya için buraya

Öncelikle hazırladığınız sayfa için elbete bir css dosyanız olmalı. Sayfanızın bütün style düzeni bu dosya üzerinden yönetiliyor olmalı (her iyi sitede olması gerektiği gibi). şimdi bu style sheet'den belli kopyalar yaratın. kopya derken sadece class isimleri aynı olsa yeter. class isimlerinin aynı olması hiçbir yerde extra kod yazmadan bu işi bitirmemizi sağlayacak.
Style sheet'i sayfaya linklediğimiz tag'e fazladan bir "ID" ekledim böylece javascript ile ona ulaşabileceğiz.

<link href="style1.css" id="stil" rel="stylesheet" type="text/css" />
Şimdi birde basitçe HTML kodumuza bakalım, bu kodu body tag'inin içine yerleştirelim.

<div class="header">Bilgi Formu</div>
<table width="260" border="0" cellpadding="5" cellspacing="0" class="mtable">
<tr>
<td width="70">&#304;sim:</td>
<td width="175"><input name="ism" type="text" class="elem" /></td>
</tr>
<tr>
<td>Soyisim:</td>
<td><input name="soyisim" type="text" class="elem" /></td>
</tr>
<tr>
<td>Tel:</td>
<td><input name="tel" type="text" class="elem" /></td>
</tr>
<tr>
<td valign="top">Adres:</td>
<td><textarea name="adres" rows="5" cols="20" class="elem"></textarea></td>
</tr>
<tr>
<td>Stil:</td>
<td>
<select name="select" class="elem" onchange="changeStyle(this)">
<option>style1</option>
<option>style2</option>
<option>style3</option>
</select> </td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="Ok" class="btn" />
<input type="reset" value="clear" class="btn" />
</td>
</tr>
</table>

koda dikkat ettiyseniz nerdeyse bütün elementlere bir style atanmış. ayrıca en altlarda bulunan select tag'ınında onChange'inde changeStyle isimli bir function var bu function'a objeyi this kullanarak yolladımki bizi birdaha onu çağırmakla uğraştırmasın
Şimdi bu function kısaca şunu yapıyor select'in seçili değerinin sonuna ".css" ekleyip bir dosya ismine çeviriyor ve style link'inin bunu çağırmasını sağlıyor.
ben kolay olduğu için bu yöntemi seçtim isteyen if ile check edip istediği ismi çağıradabilir yani select'in değerlerini isme dönüştürmek zorunda değilsiniz yada select kullanmak zorundada değilsiniz. bu sadece bir örnek, neyse.
Function'da kısaca şöyle bu function'da sayfanızın HEAD kısmında, Script tag'inin içinde bulunmalı

function changeStyle(elem){
var stylelink = document.getElementById('stil');
stylelink.href = elem.options[elem.selectedIndex].text + ".css";
}


Gördüğünüz gibi Çok kolay. sadece link tag'ini id'sinden yakalayıp href'ine istediğimiz değeri atıyoruz. oda canlı olarak sonuç veriyor.

Bu script Firefox ve IE'de düzgün çalışır. ama CSS'in yeteneklerini görmek istiyorsanız Firefoxdan şaşmayın derim ben.

1 yorum:

deniz dedi ki...

harika iş çıkarmışsınız, bana çok ama çok fayda sağladı, başka bir yerde de bu konuya rastlayamadım, teşekkür etmek istedim ;)