Emre Yüz


jQuery ile Css Dosyası Değiştirme

jQuery ve cookie ile sitede ziyaretçilerin istedikleri css dosyasını seçebilmelerini sağlayan uygulama.

jQuery ile Css Dosyası Değiştirme

By Emre YÜZ
14.02.2017 20.49



jQuery ile css dosyası değiştirme

CSS tasarımda vazgeçilmezimiz olmuş durumda hatta siteniz için birden fazla tasarım yaptınız ama hangi renk daha hoş karar veremediniz bırakın kullanıclarınız karar versin bu özellik sayesinde sitenizin ziyaretçileri istedikleri rengi (css dosyası) seçebilecekler.

Şimdi diyelimki iki adet css dosyamız var herşeyden önce varsayılan css dosyamızı sayfaya yüklememiz lazım, bunun dışında yine iki adet link olması lazımki kullanıcılarımız istedikleri gibi css dosyaları arasında geçiş yapabilsin linkler yazdığımız javascript fonksiyonumuzu çağırıyor, ve sayfa daha sonra ziyaret edildiğince tekrar bir kontrol yaparak daha önce seçilmiş css dosyasını yüklüyoruz bu şekilde uygulamamızı tamamlıyacağız kodların yanına yorum satırları yazarak her satırın ne işe yaradığını açıklamaya çalışacağım.

jquery.cookie.js dosyasını indirmek için tıklayınız.

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="jquery.cookie.js"></script>
<script>
    $(document).ready(function() //Sayfa Yüklendiğinde
        {
            if ($.cookie('css')) //Eğer Cookie Atanmışsa 
            {
                document.getElementsByTagName("head").item(0).innerHTML += '<link type="text/css" rel="stylesheet" href="' + $.cookie('css') + '">'; //Daha önce seçilmiş olan css dosyasını yüklüyoruz.
            } else //Eğer Cookie Atanmamışsa Yani Hiç Dosya Seçilmemişse 
            {
                document.getElementsByTagName("head").item(0).innerHTML += '<link type="text/css" rel="stylesheet" href="gri.css">'; //Varsayılan Css Dosyamız
            }
        });

    function css_degistir(secilen) //Css Değiştirme Fonksiyonumuz 
    {
        $.cookie("css", secilen, { expires: 1 }); //Bir Günlük Cookie Oluşturma
        document.getElementsByTagName("head").item(0).innerHTML += '<link type="text/css" rel="stylesheet" href="' + secilen + '">'; //Seçilen Css Dosyasını Çalıştırma
    }
</script>
<a href="#" onClick="css_degistir('gri.css');">Gri Css</a>
<a href="#" onClick="css_degistir('siyah.css');">Siyah Css</a>

Gayet kullanışlı bir uygulama oldu ilerleyen günlerde bende yapamayı düşünüyorum, link yerine UI kullanmak isterseniz bu linkteki switch ikonlardan kullana bilirsiniz.


 



Emre Yüz
Emre YÜZ
Multidisipliner Full-Stack Web Geliştirici/Tasarımcı, Veri
Mimarı ve Analist.

Multidisipliner Full-Stack Web Geliştirici/Tasarımcı, Veri Mimarı ve Analist.



HAKKIMDA

Emre YÜZ

Multidisipliner Full-Stack Web Geliştirici/Tasarımcı, Veri Mimarı ve Analist.

Son Yazılar

insta ❤️ feed


    Reklam