Özellikle video sitelerinde kullanılan “Işıkları Kapat” özelliği bir ara çok moda oldu. Bloglarda bile kullanılır olmuştu. Daha çok sitelerin odaklanma noktası dışındaki görüntüleri hafifletmek için kullanılan bu özellik açık renki sitelerde gece vakitleri için de işe yarıyor. Herhangi bir site odaklama gerekmeyecek bir özelliğe sahip olsa dahi bu özelliği sırf geç saatlerdeki kullanıcıları için kullanabilir.
Örneğin açık tonlarda hoş bir tasarıma sahip bir blog sitesi, bir çocuk oyun sitesi, forum sitesi vb. siteler geç fakitlerdeki kullanıcılar için bu özelliği sitelerine eklerse kullanıcıları tarafından tercih nedeni bile olabilir. Benim kullandığım tema pek açık toklarda olmadığı için tercih etmedim.
Gelelim bu güzel özelliğin kodlarına ve açıklamasına. Aslında satır satır inceleyecek olursak çok basit olduğunu göreceğiz. Herşey 2 satırlık JavaScript kodundan oluşuyor.
İşe aşağıdaki 2 satırı <head> </head> taglarını ekleyerek başlıyoruz.
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”></script>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js”></script>
Şimdi bunların açıklamasını yapalım. İlk satırda jQuery için minimum düzeyde ihtiyaçlar için gerekli kütüphaneyi yüklüyoruz. İkinci satırda ise UI yani User Interface (Kullanıcı Arayüzü) için gerekli kütüphaneyi yüklüyoruz. Eğer bu kütüphaneyi yüklemezsek “toggle” fonksiyonu çalışmaz. Diğer satırlara geçelim.
<script type=”text/javascript”>
$(document).ready(function(){
$(“#isik”).toggle(function() {$(“body”).animate({ backgroundColor: “#111111”}, 777);},
function() {$(“body”).animate({ backgroundColor: “#ffffff” }, 777);}
);
});
</script>
Bu satırları isterseniz başka bir dosyaya ekleyerek gerektiğinde çağırırsınız isterseniz de index sayfanıza ekler her yerde geçerli kılabilirsiniz. Şahsen ben sayfalarımın daha hızlı açılması için kullanıcıya hitap eden kodlarımı gerektiğinde çağırmayı tercih ederim.
İlk ve son satırlarımız herkesin bildiği gibi scriptin gövdesi oluyor ve olmazsa olmaz satırlardır. JavaScript dilinde kod yazdığımızı söylemiş oluyoruz. 2. satırdaki kod sayfa yüklenip hazır olduğunda çalışacağını söylüyor. Buraya kadarkiler standart işlerdi. Önemli olan diğer satırlar.
3. satırda toggle fonksiyonu ile html nesnelerini açıp kapatabiliyoruz. Fonksiyon bir if koşuluna gerek kalmadan nesne açıksa kapatır, kapalıysa açar. İçerisindeki animate komutu ise toggle fonkisyonunun ilk parametresi olarak verilmiştir. İlk parametre animasyonun tipi, ikincisi ile değeridir. Arkaplanın kararması veya aydınlanmasını istediğimiz için animate ile backgroundcolor özelliğine renk atadık. Ardından toggle fonksiyonunun süre parametresine 777 ile milisaniye cinsinden değer verdik.
4. satırda da aynı işlemleri yaptık ama tek fark rengin zıttı oldu. 111111 ile hafif karanlık efekti verdiğimiz arkaplanımıza ffffff ile aydınlık veriyoruz ve ardından fonksiyonu sonlandırıyoruz.
Genel olarak baktığımızda işlem çok basit. Toggle fonksiyonunu kullanabilmemiz için jQuery minimum kütüphanesini ve UI kütüphanesini ekliyoruz, fonksiyonu sayfa yüklendiğinde çalıştırıyoruz, açılıp kapanma efektini toggle ile veriyoruz ve son olarak rengini de animate fonksiyonu içerisinde backgroundcolor özelliğine atayarak işi bitiriyoruz 🙂
Fonksiyonla işimiz bitti ama bu nasıl çalışacak 🙂
<a id=”isik” href=”javascript:void(0)”>
Yukarıdaki tek satırlık kod ile fonksiyonu çalıştırabilirsiniz. ID değerini doğru girdikten sonra kesin çalışır.
Çalışır örneğine buradan bakabilirsiniz.
İlk Yorumu Siz Yapın