JQuery İle Açılır Kapanır Div
*Örneğin 10 kutudan oluşan çalışan halini ve tüm kodlarını alt kısımdaki Konu Örneklerinde görebilirsiniz.
JQuery kullanarak html elemanlarını görünür yapmanın ya da gizlemenin ne kadar kolay olduğunu ilk konularımızdan biliyoruz. Bu gösterme ve gizleme işlemlerini farklı amaçlarla yine kolayca kullanabileceğimiz konulardan biri de açılır kapanır div elemanları oluşturmaktır.
Örneğimizde senaryo şu şekilde olsun: link1, link2, ..., link100 şeklinde isimlendirilmiş 100 tane linkimiz olacak ve kutu1, kutu2,..., kutu100 şeklinde isimlendirilmiş de 100 tane div elemanımız olacak. Linklerden herbiri kutulardan birinin görünür olmasını sağlayacak. Örneğin link33'e tıklanırsa, kutu33 görünür olacak.
Kutular görünür olduğunda ekranın yüzde 80'i kadar yer kaplayacak. Kutunun etrafında kalan kısımlar ise yarı saydam bir şekilde kararacak.
Aynı zamanda açılan kutuların sağ üst kısmında içinde X yazan bir div olup, tıklandığında o kutunun kapanması sağlanacak.
Html ve Css Kısmı
Tasarım tamamen size kalmıştır. Tıklanacak nesneleri oluşturmak için a etiketi veya başka etiketler de kullanabiliriz. Bu örnekte div etiketi kullandık. Buton-link amaçlı kullanılacak divleri aşağıdaki gibi oluşturalım:
<div class="gosterButonu" id="link1">
Link1 içeriği...
</div>
<div class="gosterButonu" id="link2">
Link2 içeriği...
</div>
... sırasıyla diğer divler gelecek
Div kullanmamın sebebi linklerde href="#" kullanıldığında, tıklanınca sayfanın yukarı kaymasıdır. Bu divlerin üzerine gelindiğinde el işareti çıkmasını css ile sağlayacağız. gosterButonu seçicisine aşağıdaki stilleri uygulayalım. (Bu stiller tamamen ihtiyaca bağlıdır. Program kısmına bir etkisi yoktur.)
div.gosterButonu {
display: inline-block;
transition:all 0.4s;
cursor:pointer;
margin:10px; padding:0px;
width: 172px;
height: 200px;
border: 2px solid #555;
box-shadow: 10px 10px 10px #555;
text-decoration: none;
text-align:center;
color:black;
}
Tıklandığında açılacak olan kutuları ise şu şekilde oluşturalım:
<div id="kutu1" class="kutu">
<div class="icKutu">
<div class="kapatButonuCerceve">
<div class="kapatButonu">X</div>
</div>
<h1>Başlık1</h1><div class="clear"></div>
<p>Açıklamalar ve diğer içerikler...</p>
</div>
</div>
<div id="kutu2" class="kutu">
<div class="icKutu">
<div class="kapatButonuCerceve">
<div class="kapatButonu">X</div>
</div>
<h1>Başlık1</h1><div class="clear"></div>
<p>Açıklamalar ve diğer içerikler...</p>
</div>
</div>
Yukarıdaki divleri linklerde olduğu gibi çoğaltarak 100 adet elde edeceğiz ve her birine gerekli içerikleri ekleyeceğiz.
Bu kutuların içerik ve tasarımları tamamen size bağlıdır. Örnekte kutu seçicisini kullanarak ekranın tamamını kaplayan yarı saydam bir div elde edeceğiz. Bunun içinde ise icKutu yer alacak ve ekranın yüzde 80'i kadar yer kaplayacak. Tıklanınca görüntülenecek olan içerik icKutu içerisinde yer alacak. Kapat butonunu da icKutu içerisine yerleştirip css ile biçimlendireceğiz.
Bu şekilde toplamda 100 tane gizlenmiş kutumuz olacak. Bu kutuların ortak özelliklerini .kutu seçicisinde belirteceğiz. Ayrıca kutu1, kutu2 şeklinde herbirine farklı id vereceğiz ki bu id'ye göre hangi kutunun açılması gerektiğini belirleyebileceğiz.
Kutularda olması gereken ortak özellikler;
-
position: fixed; top:0; left:0; özellikleri sayesinde sayfa içinde sabit şekilde konumlandırılması ve üstten-soldan boşluk olmaması
-
Kutuların başlangıçta gizli olması, tıklandığında ilgili kutu görünür yapılacak
-
Genişlik ve yüksekliğinin yüzde 100 yapılarak ekranı kaplaması (body etiketinin de margin ve padding özellikleri 0 yapılmalı!)
-
Sayram bir arkaplan rengi uygulanması
Bu ortak özellikleri .kutu seçicisi içine aşağıdaki gibi yazalım:
.kutu {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.8);
}
Bu stiller sayesinde ekranı tam kaplayan ve karartan div elemanlarını elde etmiş olacağız. Tabi ilk anda hiç biri görünmeyecek. Position özellikleri fixed olarak ayarlandığı için bu divleri sayfamız içerisinde nereye yazacağımızın hiç bir önemi yok. Sayfanın en sonuna bu divleri sıralayabiliriz.
.icKutu seçicisi sayesinde ise, ekranı kaplayan bu divlerin ortasında başka bir kutu elde edeceğiz ve bu kutularda ilgili içerikler görüntülenecek.
.icKutu {
overflow:scroll;
width: 80%;
height: 80%;
margin: 5% auto;
background-color: white;
border: 3px solid gray;
padding: 10px;
box-shadow: -10px -10px 25px #ccc;
}
Bu kutuların görünüşleri de size bağlıdır. Yukarıdaki stiller örnek amaçlıdır. Genişlik ve yükseklikleri yüzde 80 yapılmıştır ve sayfada ortalanmıştır. Etrafı .kutu seçicisi sayesinde kararmış görünecektir.
Overflow özelliği scroll yapılarak, içerik kutuya sığmazsa kaydırma çubuğu çıkması sağlanmıştır.
icKutu içindeki kapat butonu ve diğer tüm nesneleri istediğiniz gibi biçimlendirebilirsiniz.
JQuery Kısmı
Bizim örneğimizde tıklanacak olan nesne bir div elemanı veya onun içindeki resim olarak planlanmıştır. Birinci fonksiyonumuzda bu yüzden seçici olarak .gosterButonu ve .gosterButonu içindeki img kullanılmıştır.
gosterButonu seçicisini tıklanacak tüm nesnelerimize uygulamıştık. Yani herhangi bir linke (dive) tıklandığında bu fonksiyon tetiklenecek. Burada tıklanan kutunun id'sini elde ederek, açılacak kutuyu belirliyoruz.
Tıklanan yer kutunun içi veya resim olabileceği için $(this).closest('div').attr('id') komutu ile tıklanan nesneye en yakın div'in id'sini elde ediyoruz. Kutuların idleri link1, link2 diye gittiği için 5. karakterden sonrasını alarak numarayı elde ediyoruz. Sonra da başına #kutu koyarak açılacak kutunun id'sini elde ediyoruz. Bu id'yi kullanarak fadeIn metodu ile o kutunun görünür olmasını sağlıyoruz.
$(document).ready(function () {
$(".gosterButonu, .gosterButonu img").click(function (event) {
var butonAdi = $(this).closest('div').attr('id'); // tıklanan linkin idsini aldık
var butonNo = butonAdi.slice(4); // idnin içinden 5. karakterden sonrasını aldık
var kutuAdi = "#kutu" + butonNo; // kutu adını elde ettik
$(kutuAdi).fadeIn(300);
});
$(".kapatButonu").click(function () {
$(".kutu").fadeOut(200); // kapatButonuna tıklanınca açılmış durumdaki kutu kapansın.
});
$(".kutu").click(function () {
$(".kutu").fadeOut(200); // kutuya tıklanırsa da açılan kutu kapansın.
});
$(".icKutu").click(function () {
event.preventDefault();
event.stopPropagation();
});
});
Son fonksiyonumuzu şu amaçla kullandık. Kutuya tıklayınca .kutu kapansın demiştik. Bu durumda .kutu içindeki .icKutuya tıklayınca da .kutu kapanacaktır. Bunu önlemek yani icKutuya değil de etrafında bir yere tıklayınca kapanmasını sağlamak için preventDefault ve stopPropagation metotlarını kullandık.
javascript, jquery, ekranı karartarak div açma, ekranı karartma, butona basınca kutu ekranı karartma, modal popup penceresi oluşturma
KONU İLE İLGİLİ ÖRNEKLER
Kendin dene butonuna tıklayarak örneği tam ekran görebilir, kodları inceleyebilir ve sonucu görebilirsin.
13303 kez okundu.