Yeni Başlayanlar İçin jQuery – Bölüm 2

jQuery’de Olaylar

Önceki bölümde de belirttiğim gibi, javascript olay temelinde çalışır. Bir işlemin yapılası için bir olay gerçekleşmeli. jQuery’de tanımlı olaylardan bazıları;

  • click(): Bir elemana tıklanma olayı
  • mouseOver(): Fare üstüne gelme olayı
  • moseOut(): Fare üstünden ayrılma olayı
  • toggle(): 2 tık. Fare bir tıklayınca 1., ikinci tıklayışında da 2. fonksiyonu çalıştırır.
  • change(): Bir “select box” nesnesindeki, seçili elemanın değişmesi
  • trigger(): Tetikçi. Bir olay çalıştığında başka bir olayı tetikler.

Tüm olaylar: http://api.jquery.com/category/events/

Ortak kullanımlarıı parantezlerin içine “function(){}” yazımıdır. Süslü parantezlerin içine, olay gerçekleştiğinde çalışacak kodları yazmalısınız. Toggle fonksiyonunda ise iki defa “function(){}” yazmalı ve aralarına “,” koymalısınız.

Örnek Kullanım

$(‘#akilli’).click(function(){
   alert(‘Akıllı ol, aklını almıyayım!’);
}) // Bu kod ile, “akilli” id değerine sahip elemana tıklandığında ekrana “Akıllı ol, aklını almıyayım!” uyarısını verir.

$(‘.cakal’).toggle(function(){
   alert(‘ilk tık’);
},function(){
   alert(‘ikinci tik’)
}) // Bu kod ile “cakal” class değerine sahip elemana ilk tıklandığında “ilk tık”, ikinci tıklandığında da “ikinci tik” uyarısını görüntüler. Üçüncü tıkta da tekrar birinci, dördüncü tıkta da ikinci mesajı verir. Böyle uzayıp gider... 🙂

jQuery’de Efektler

En zevkli işlerden biridir Efekt olayları. Onlar da basit, merak etmeyin! 🙂
fadeOut(): Nesnenin görünürlüğünü azaltır.
fadeToggle(): Nesenin görünürlüğünü azaltır-artırır.
slideTogge():Yaşağı – Yukarı slayt efekti
show(): Nesneyi gösterir.
hide(): Nesneyi gizler.

Tümü: http://api.jquery.com/category/effects/

Örnek Kullanımlar

$(‘.saklan’).click(function(){
   $(‘#beniSakla’).fadeOt(‘slow’); // “saklan” sınıfına sahip elemana tıklandığında, “beniSakla” id değerine sahip elemanın görünürlüğü azalarak kaybolur. ‘slow’ yazan yere, “normal” ya da ‘fast’ değeri verebilirsiniz.
})

$(‘.tıkla’).click(function(){
   $(‘#oyna’).slideToggle(‘slow’); // “tikla” classına sahip elemana tıklandığında, “oyna” 	id sine sahip elemanı durumuna göre önce aşağıya doğru açar, sonraki tıklamada yukarı doğru kapatır.
}):

Bir sonraki bölümde görüşmek üzere…

5 thoughts on “Yeni Başlayanlar İçin jQuery – Bölüm 2

  • $(‘.gizle’).click(function(){
    $(‘#sakla’).animate({
    ‘slow’});
    })

  • $(‘.gizle’).click(function(){
    $(‘#sakla’).animate({
    width : ‘toggle’},600);
    });

    gizle sınıfana ait elemana tıklandığında id’si #sakla olan nesnenin genişliğini animasyonlu bir şekilde gösterip gizliyoruz.Soru ise ‘.gizle’ elemanına ilk tıklandığında daha animasyonu bitmeden tekrar tıklanabiliyor.Bunun önüne nasıl geçebiliriz.

  • Güzel sorun için teşekkürler. Cevabı aşağıda açıklıyorum.

    //Animasyonun çalışıp çalışmayacağını bu global değişkende tutuyoruz
    var calis=true;

    $(‘.gizle’).click(function(){
    //Tetikleyici çalıştığında calis değerini kontrol ediyor. Bu değer “true” ise çalışıyor aksi taktirde hiçbir işlem yapmıyor.
    if(calis){
    //Bi’kere çalıştığında tekrar çalışmasını engelliyor.
    calis=false;
    //Animasyon
    $(‘#sakla’).animate({
    width : ‘toggle’},1000,”,function(){
    //Animasyon “callback” fonksiyonu. Animasyon tamamlandığında “calis” değerine true atıyor ve artık nesneye tıklandığında animasyon çalışabilir.
    calis=true;
    });
    }
    });

  • $(‘.gizle’).click(function(){
    $(‘#sakla’).animate({
    width : ‘toggle’},600);
    });

    Komutu Yerine

    $(‘.gizle’).click(function(){
    $(‘#sakla’).stop().animate({
    width : ‘toggle’},600);
    });

    Kullanılırsa animete nerede olursa olsun her tıklamada yeniden başlar
    kolay gelsin iyi kodlamalar

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir