jQuery ile Açılır Paneller Oluşturmak
jQuery şüphesiz en çok bilinen ve kullanılan Javascript kütüphanesi. Bunda kısa kodlarla büyük işler başarmasının elbette çok büyük payı var. jQuery’nin sunduğu efekt, olay ve işlemler sayesinde çok az bir kodla muhteşem şeyler yapılabiliyor. Ben bu yazımızda çok kısa olarak jQuery ile web sayfalarımızda kullanmak üzere bir açılır panelin nasıl yapılacağını anlatacağım. Makalemizin sonunda neler yaptığımızı anlatacak ve çalışır bir örneğimizi sizlerle paylaşacağız.
(Makalemize başlamadan önce jQuery’nin temel dosyasını indirmiş olmanız gerekiyor. jQuery’nin kararlı son sürümünü kendi sayfasından indirebilir ve üzerinde uygulamalar geliştirebilirsiniz)
Öncelikle panelimizin görünümünü düzenleyen Css kodlarını yazarak başlayalım…Uygulamamızı yazmak için panel.html isimli bir web sayfası oluşturalım. Aşağıdaki kodları panel.html dosyamızın Head bölümü içine yazarak kaydedelim.
.panelac {
width:100px;
padding:4px;
margin:0;
background:#2e83ff;
color:#fff;
}
.panel {
width:500px;
height:200px;
background:#000;
display:none;
color:#fff;
padding:10px;
}
Kodlarda gördüğünüz gibi iki adet Css sınıfı oluşturduk. Bunlardan .panelac isimli sınıf üzerine fare ile tıkladığımızda panelimizi görünür hale getirecek olan sınıftır. Diğer bir sınıf olan .panel isimli sınıfta ise panelimizin açıldığında nasıl bir görünümde olacağını belirledik. Klasik Css yazımının dışına çıkmadık. Yalnız .panel isimli sınıfın görünüm durumunu “display:none” parametre ve değeriyle görünmez olarak belirledik.
Css kodlarımız oldukça yalın ve anlaşılır sanıyorum. Şimdi bu iki sınıfı kullanarak jQuery kodlarımızı yazalım. Panelimizin açılır kapanır olması için biz jQuery’nin “slide” fonksiyonundan yararlanacağız. Aşağıdaki kodları panel.html sayfamızın Head bölümüne kaydedelim.
$(document).ready(function(){
$(".panelac").click(function(){
$(".panel").slideToggle("slow");
$(this).toggleclass("active"); return false;
});
});
Dilerseniz şimdi yazdığımız Css ve Js kodlarını ve yaptığımız işlemi gösterecek olan Xhtml kodlarını tek bir sayfa üzerine yazalım. (Css kodlarında gördüğünüz #sayfa isimli id örneğimizin sayfa ortasında yer alması içindir, dilerseniz bu kodu da yazabilirsiniz)
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery ile Açılır Paneller Oluşturmak</title>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$(".panelac").click(function(){
$(".panel").slideToggle("slow");
$(this).toggleclass("active"); return false;
});
});
</script>
<style>
#sayfa {margin:0 auto; width:500px; padding:0;font:12px arial, verdana, sans-serif;}
.panelac {width:100px;padding:4px;margin:0;background:#2e83ff;color:#fff;}
.panel {width:500px;height:200px;background:#000;display:none;color:#fff;padding:10px;}
</style>
</head>
<body>
<div id="sayfa">
<div class="panel">Burada Panelimizin İçeriği Bulunmakta</div>
<div class="panelac">Panel Aç</div>
</div>
</body>
</html>
Javascript kodunda gördüğünüz gibi öncelikle .panelac isimli sınıfa tıkladığımızda (click) neler olacağını yazıyoruz. Burada .panel isimli sınıfımız jQuery’nin slideToggle fonksiyonunu kullanarak görünür hale gelecek. Fonksiyon satırında parantez içinde hangi hızda açılacağını fast, slow gibi değerlerle yazabiliyoruz. Dilersek bu alanda milisaniye cinsinden değerlerde yazabiliriz. (1000, 500 gibi) Javascript kodumuzun son satırında işlemin return false ile terse döndürülmesini istiyoruz. Yani .panelac isimli sınıfa yapılacak sonraki bir fare tıklaması ile panelimiz kapanacak.
Örnek sayfayı açarak panelimizin çalışır halini görebilirsiniz. Bu makale ve uygulamayı hazırlarken jQuery’nin kendi belgelerinden ve Türkçe en faydalı jQuery kaynağı olarak gördüğüm Erhan kardeşimin ilgili yazısından faydalandım. Umarım sizler için faydalı olmuştur.
Rastgele Yazılar
jQuery ile Açılır Paneller Oluşturmak yazısı için 8 yorum yapılmış...
Yorumunuzu Yazın
merhaba admin yazın için teşekkür ederim bu jQuery çok etkili bir şey takip ettiğim oluyor türkçe makalelerde bunu wordpress sitemize nasıl entegre edeceğiz acaba.Bu konuda türkçe makalelerde yazılsa çok daha verimli olur jQuery.teşekkür ederim tekrar makalen için
Uğur bunun için ayrıca bir makale yazmaya gerek yok. Burada bile anlatabilirim nasıl yapılacağını.
Kullandığınız temanın header.php dosyasını açın. Kodların tamamını verdiğim alanda head kodunun bitişine kadar olan kodları header.php dosyasında yine head bitişine kadar yazıp kaydedin. Sonra body etiketinden sonra panelin görünmesi için gerekli olan Xhtml kodunu yazıp kaydedin. Örnek uygulamada verdiğim stil kodlarını da temanızın style.css dosyasına kaydedin.
Bu şekilde dosyalarınızı kaydettiğinizde panel görünecektir. Örnek kodların görünüm ve stillerinde değişiklikler yaparak sitenize uyarlayabilirsiniz. (Temanızın içine jQuery ana js dosyasını koymayı unutmayın)
Çok işime yaradı, bu yararlı bilgi için çok teşekkür ederim.
İki tane yapmaya çalıştığımızda birine tıklarsak ikisi birden açılıyor.Nasıl çözebiliriz ki???
Kul_ahmet, 2 tane yapmaya kalkarsanız js ve stiller çakışacaktır. Zaten panel uygulamalarında genellikle tek panel açılır ve o şekilde çalışır. Sanıyorum siz tab menü gibi bir uygulama yapmaya çalışıyorsunuz.
Sadedce kodları inceleyerek gerçekten temiz çalıştığını anladım teşekkürler arşivde ki yerini aldı.
çok güzel anlatım ve paylaşım olmuş elinize sağlık, peki bunu sağ’dan sola doğru veya tam tersi sol’dan sağ’a açılır şekilde nasıl yapabiliriz?
Seko bu örnekte o yapılmaz. jQuery’nin belli bir fonksiyonu kullanılarak yapıldı. Senin dediğin şeyleri zaten bu yöntemle değil başka yöntemlerle yapmak icab eder. İnternette biraz araştırırsa onlarca örnek olduğunu görürsün. Teşekkür ederim.