Merhabalar,
Bu yazımda bazı sitelerde gözüme çarpan, temaların tek bir tıklama ile farklı renge veya stile nasıl geçiş yapıldığından bahsedeceğim. Bu işlemin farklı yolları olabilir ben kendi kullandığım jQuery yolu ile anlatacağım.
Öncelikle yazılarımdan birinde bahsetmiştim Renk Seçiciyi sabit bir şekilde örnek olarak sağa konumlandıralım.
See the Pen Renk Seçici by furkangiray.com (@furkangiray_com) on CodePen.
Yukarıda basit bir renk değiştirici kutu koydum. Tasarımını kendinize göre özelleştirebilirsiniz ben çalışma mantığından bahsedeceğim için biraz basit bir çalışma oldu 🙂
Amaç hangi renge tıklanırsa temanın ana rengini o renge dönüşterecek olan Css dosyasını çağırarak o Css dosyasında renk değişimini gerçekleştirmek.
Css dosyalarının link etiketi ile çağrıldığını biliyoruz. Biz sadece belli bir link etiketini jQuery ile değiştireceğimiz için id veriyoruz. Bu id üzerinden jQuery ile çağırabileceğiz. Örnek olarak link ve a etiketinin data-css nitelikleri aşağıdaki gibi olabilir;
<!DOCTYPE html>
<html lang="tr">
<head>
<link rel="stylesheet" id="temaRenk" href="css/kirmizi.css">
</head>
<body>
<div class="sag-icon-bar">
<ul class="renkSec">
<li><a href="#" data-css="css/mavi.css" class="mavi"></a></li>
<li><a href="#" data-css="css/kirmizi.css" class="kirmizi"></a></li>
<li><a href="#" data-css="css/sari.css" class="sari"></a></li>
<li><a href="#" data-css="css/turuncu.css" class="turuncu"></a></li>
<li><a href="#" data-css="css/yesil.css" class="yesil"></a></li>
</ul>
</div>
</body>
</html> Yukarıdaki Html tarafında Css dosya yolunu data-css içinde de belirttik bu sayede tıklanan a etiketinde dosya yolu link etiketinde href niteliğine atanacaktır.
Bunun için nasıl bir örnek jQuery kodu yazacağımıza bakalım;
$(document).ready(function() {
// renkSec class'ının içindeki a etiketine tıklandığında
$(".renkSec li a").click(function() {
// Css dosyasını çağırdığımız link etiketinin href niteliğini
// renk seçiciden tıklanan a etiketinin data-css niteliği ile güncelle
$('link#temaRenk').attr('href', $(this).data('css'));
// class isimlerini css dosya adıyla aynı yapıp bu sayede değiştirebiliyoruz
});
}); Sayfa hazır olduktan sonra çalışan fonksiyon içine jQuery kodlarını yazdık. Yorum satırları ile ne yapıldığını açıklamaya çalıştım.
Son eklediğimiz jQuery kodu ile tıklanan rengin belirttiğimiz farklı renkleri barındıran Css dosyaları arasında geçiş yaparak tema renginin tek bir tık ile anlık olarak değişmesini sağlıyoruz. Bir nevi çağırdığımız Css dosyasının kaynağını değiştiriyoruz. Css dosyalarında da renkleri göre stil yazıyorsunuz.
Umarım anlaşılır bir yazı olmuştur ve işinize yarar. Anlamadığınız bir kısım olursa yorumlarda bahsedebilirsiniz.
Mutlu Kodlamalar 🙂
2 comments
merhabalar güzel bir yazı ve örnekleme olmuş teşekkürler
Rica ederim beğenmenize sevindim. İlginiz için teşekkür ederim