jQuery’de Açılır-Kapanır Div

jQuery / Ajax / JavaScript kategorisinin ikinci makalesi ile artık jQuery ye adım atıyoruz şimdiki konumuz basit ama konunun temel bilgi olması için üzerinde biraz fazla duracağım. Bundan sonraki derslerimizde jQuery ile post işlemleri gibi işlemler yapcağız, şimdiki konumuz jQuery deki slideUp() , slideDown() ve toggle() fonskiyonlarını kullanmak.

İndex.html sayfamızı hazırlıyoruz
Öncelikle tagları arasına jquery.js dosyasımızı entegre ediyoruz. ( jquery.js dosyamız js/ dizinin altındadır. )

<head>
<script src=”js/jquery.js” type=”text/javascript”></script>
</head>

<head>

</head>

Şimdi arkadaşlar 2 şekilde div açma ve kapatmayı yapabiliriz şimdi birinci yolu göstereceğim.

Birinci Yol

Aşağıdaki kodları <head> </head> tagları arasına yazıyoruz.

$(document).ready(function () {
$('#Menu a').click(function () {
$('#Menuiki').slideDown('medium');
});
});

$(document).ready(function () {

$('#Menu a').click(function () {

$('#Menuiki').slideDown('medium');

});

Bu kodlar belki zor görünüyor gibi gelebilir ama korkmaya gerek yok arkadaşlar teker teker anlatacağım.

$(document).ready(function () { xxxxx });

1	$(document).ready(function () { xxxxx });

belge tamamen yüklendiğinde xxxxxxx diye belirttiğimiz fonksiyonları çalıştır.

$('#Menu a').click(function () {yyyyyyyy });

1	$('#Menu a').click(function () {yyyyyyyy });

<div id="Menu">
<a href="#">Aç</a>
</div>

</div>

Burada Menu class’ının altındaki herhangi bir <a></a> tagına tıklandığında yyyyyy işlemini gerçekleştir diyoruz.

$('#Menuiki').slideDown('medium');

1	$('#Menuiki').slideDown('medium');

Burada ise

<div class="Menuiki"></div>

1	<div class="Menuiki"></div>

Div’îni slideDown yani aşağıda doğru slayt efektiyle açıyor.

Burada slideDown yerine slideUp toggle taglarınıda kullanabilirsiniz aslında daha fazla etiket kullanabilirsiniz ama şimdilik ben bu üç fonksiyonu anlatıyorum.

Bu Birinci yoldu yani jQuery’de de belirttin xx adlı ziyaretçi şu divin içindeki şu <a></a> tagına tıklarsa şu divi aç diye belirttik.

Demo :

slideUp
slideDown
Toggle

İkinci Yol

Şimdi ise direk biz istediğimiz <a></a> tagına değer vereceğiz. öncelikle jquery.js dosyasını <head></head> tagları arasına entegre ediyoruz.

<head>
<script src="/jsjquery.js" type="text/javascript"></script>
</head>

<head>

</head>

jquery.js yi entegre ettikten sonra sitemizdeki herhangi bir <a> </a> tagına gidip

<a href="#" onclick="$('#Aycan').slideDown('normal');
$('#Zone').slideDown('normal');">Divleri aç /kapat</a>

1 2	<a href="#" onclick="$('#Aycan').slideDown('normal'); $('#Zone').slideDown('normal');">Divleri aç /kapat</a>

Divleri aç / kapat linkine tıkladığımız zaman #Aycan div’ini aşağı doğru açacak #Zone divini ortadan kaldıracak.

Burada slideUp fonksiyonun yerine slideUp() , slideDown() ve toggle() bu fonksiyonlarıda yazabilirsiniz.

Demo : Toggle

Sonuç :

Umarım anlamışssınızdır, anlamadığınız kısımları konu altında belirtirseniz elimden geldiğince yardım etmeye çalışacağım bu arada artık jQuery anlatımları için bir klasör oluşturdum onu şuan veriyorum artık bütün değişiklikler orda olacak.

buradan

Post Views: 23.536