Toggle(fn,fn1) ile Açılır,Kapanır Alanlar

bitlimakina tarafından 21 Mart 2009 | 6 Yorum | JQuery


Aslında bu eğlenceli uygulama çokta kullanışlı olabilir. Özellikle side-bar’da açılır duyuru bölümleri için kullanılabilir. Şimdi kodu çalışmasından biraz bahsedelim; tavsiyem öncelikle çalışma dosyasını indirmeniz.

Altta Jquery kodunu görebilirsiniz; Öncelikle hızlı bir gözgezdirin;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$(document).ready(function(){
$("a.buton").toggle(
/*Birinci Görev Başlangıcı*/
function(){
 $("div.icerik").slideUp(200);
 $("a.buton").removeClass("acik");
 $("a.buton").addClass("kapali");
 $(".baslik").css("color","#ffe500");
},
/*İkinci Görev Başlangıcı*/
function(){
 $("div.icerik").slideDown(200);
 $("a.buton").removeClass("kapali");
 $("a.buton").addClass("acik");
 $(".baslik").css("color","#FFF");
}
);
});

toggle() fonksiyonu kullanarak herhangi bir seçiciye “a,p,div” iki farklı durum atayabiliyoruz. Çalışması için atandığı seçicinin üzerine tıklamak yeterlidir. Bizim örneğimizde seçici “.buton” sınıf adına sahip bir <a> tagıdır. <a> etiketine ilk kez tıkladığımızda function() lardan birincisi aktif olacaktır, ikinci defa tıkladığımızda ise function() lardan ikincisi aktif olacaktır. toggle(fn1,fn2) yapısına sahiptir. burada function() bloklarının “,” ile ayrıldığına dikkat edin.

Çalışma dosyasının tamamını indirmek için buraya tıklayabilirsiniz.

Yorumlar

  1. erkan (20 Mayıs 2009)

    Paylaşım İçin Teşekkürler çok güzel bir çalışma ben bu çalışmada acaba değişiklik yapılabilirmi diye soracaktım çalışma ilk etapta açık konumda gözüküyor bunun tam tersini yapmak yani alan ilk etapta kapalı görünsün sonradan butonla açılsın bu mümkünmü yardımcı olabilirmisiniz
  2. bitlimakina (20 Mayıs 2009)

    erkan bunu yapmak çok kolay.17.satırda ; den önce .click() yazman yeterli olacak.
  3. erkan (20 Mayıs 2009)

    çok teşekkür ederim sanalı alt üst ettim bunun için okadarki .click() şu kod için bu kadar sevineceğimi tahmin edemezdim :)

  4. bitlimakina (20 Mayıs 2009)

    faydalı olmasına sevindim…:D
  5. Gökhan (1 Haziran 2010)

    merhaba birden fazla sıkça sorunlan soru kısmı için toggle kullanıyorum. ama yapmak istediğim. birine tıkladı açtı diyelim. sonra.. başka birine tıkladığında ilk açtığımı kapatmasını sağlamak.. bunu yapamadım fikir verebilirmisiniz. her zaman sadece 1 tanesi açık kalabilsin istiyorum.
  6. bitlimakina (3 Haziran 2010)

    Eğer link gönderirsen yardımcı olmaya çalışırım :)

Yorum Bırak!