jQuery Video derslerimizde daha önce görmüş olduğumuz hide / show metodlarına bir alternatif olarak toggle metodu bulunmaktadır. toggle metodu belirlediğimiz nesneyi kaybedip daha sonra tekrar gösterebilme fonksiyonudur.

toggleClass ise; belirlediğimiz nesnelerin CSS sınıf ayarlamarını isteğimiz doğrultusunda değiştirip tekrar aynı haline geri alma fonksiyonudur.Daha kaliteli Görüntü için Videoyu indiriniz

Alternatif Video;

Video içeriğinden özet..

CSS

CSS ayarlarımızda kutu adındaki katmana nitelik kazandırdık ( 300 x 300 boyutlandırma ve orange arkaplan rengi)

kutu katmanında kullanılabilecek bir çerçeve (border) ayarı belirttik.

paragraf (<p>) larda kullanılabilecek arkaplan renkleri belirttik.

#kutu
    {
        width: 300px;
        height: 300px;
        background: orange;
    }
    .border
    {
    	border: 5px solid green;
    }
    .highlight
    {
    	background: yellow;
    }

[ad]

jQuery

Javascript kodlarımız arasında toggle metodunu kullanarak, kutu olarak atadığımız katmanın kaybolup tekrar görünmesini sağladık:

         $(function() {
                $('a#cerceve').click(function() {
                //$('#kutu').toggle('slow');
                    $('#kutu').toggleClass('border');
       });
                $('a#kutuac').click(function() {
                    $('#kutu').toggle('slow');

                });

                 $('p').click(function() {
                    $(this).toggleClass('highlight');

                 });
      });

toggleClass yöntemi ile kutu olarak atadığımız katmana çerçeve ekledik:

$('a#cerceve').click(function()  {
 $('#kutu').toggleClass('border');

});

Yine toggleClass metodu ile html şablonumuz içerisindeki paragraflarımızın CSS ayarlarına etki ederek bir arkaplan rengi oluşturmasını sağladık.

[code language="lang="]
$('p').click(function() {
$(this).toggleClass('highlight');

});
[/code]

$(‘p’).click(function() { ile <p> yi çağırıp <p> tıklandıktan sonra CSS deki highlight ögesini çalışır duruma getirdik.

Diğer Video Dersleri

Ders 1- jQuery Başlangıç

Ders 2 -Fade, Slide hide -show Metodları

Ders 3 -Animate Metodu

Ders 4 – Varyasyon Oluşturma

Ders 5 -  toggle ve toggleClass Metodları

Ders 6 -  jQuery Slidedown Metodu Kullanımı

Ders 7 -  jQuery Dersleri: hover() Metodu

Ders 8 -  jQuery hover ve chlidren Metodu

Ders 9 – Chaniable – Animate Metodu ile Nesne Hareketlendirme