jQuery, gittikçe daha çok sitelerimize girmeye başlıyor. Bununla birlikte jQuery özelliklerini daha iyi tanımamız gerekiyor. Bu yazımda anlatacağım slideToggle özelliği, bir buton aracılığı ile herhangi bir yazıyı, kutuyu vb. şeyleri açıp-kapatmaya yarayacak. Aslında bu işlemi iki farklı jQuery fonksiyonu ile yapabiliriz, ancak slideToggle özelliği bu işlemi tek başına yapabiliyor. Hemen canlı bir örnek görmek istiyorsanız bloğumun üst kısmındaki “Duyuru” kısmına bakabilirsiniz. “Duyuru” butonuna bastığınızda üst taraftan bir bölüm açılıyor ve içeriğini görebiliyorsunuz. Butona tekrar bastığınızda ise bölüm kapanıyor ve yine sadece “Duyuru” butonunu görüyorsunuz. Şimdi ise bu işlemi yapmamızı sağlayacak kodları inceleyelim.
Öncelikle temamızın “header.php” dosyasında ve etiketleri arasına şu kodumuzu ekliyoruz.
<script></script>Kodumuzu ekledikten sonra yine ve etiketleri arasına şu jQuery özelliğimizi ekliyoruz.
<script>
$(function(){
$('.duyurubuton').click(function () {
$('.duyuruyazi').slideToggle(); }); });
</script>Bu kodumuzdaki 3. satır butonumuzun olduğu class isimini belirtiyor. Bu butona tıklandığı anda “duyuruyazi” isimli class, açılacak ve yazımız görülecek.
Şimdi ise etiketinin hemen ardına şu kodu ekliyoruz.
Buraya duyuru yazısı eklenecek.
DUYURU
Bu 3. satırı yine dilediğiniz şekilde düzenleyebilirsiniz. Sadece yazı değil, link, resim veya başka bir kod koyabilirsiniz. Şimdi son olarak stil kodlarımızı da ekleyip, yazımızı sonlandıralım.
#duyuru{}
#duyuru .duyuruyazi{text-shadow:1px 1px #FFFFFF;background:#DDDDDD;display:none;border-top:none;border-right:2px solid #777777;border-left:2px solid #777777;border-bottom:2px solid #777777;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;left:0;margin:0 auto;padding:8px 10px;right:0;}
#duyuru .duyurubuton{text-shadow:1px 1px #FFFFFF;cursor: pointer;background:url("resimler/arka-h3.jpg") repeat scroll 0 0 #43bfe3;border-top:none;border-right:2px solid #777777;border-left:2px solid #777777;border-bottom:2px solid #777777;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;font-weight:bold;margin:0 auto;padding:4px 0 5px 1px;width:75px;} Stil kodlarımızı da “style.css” dosyamıza ekledikten sonra dosyamızı kaydediyoruz. Artık sitemizin hemen üstünde açılır-kapanır bir duyuru alanı eklemiş olduk. Yazıyı sonuna kadar dikkatlice okur ve uygularsanız, sorun yaşayacağınızı sanmıyorum.
NOT: Kodlarda kullandığımız ID ve CLASS isimlerini dilediğiniz gibi değiştirebilirsiniz. Ancak birini değiştirirseniz, tüm kodlarda olan ID ve CLASS’larıda değiştirmeniz gerekecek.
Kaynak: http://www.syorulmaz.com/jquery-ile-slidetoggle-ozelligi.html
