jQuery Dersleri: toggle ve toggleClass Metodları

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.

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

[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:

[code lang="js"]
$(function() {
$('a#cerceve').click(function() {
//$('#kutu').toggle('slow');
$('#kutu').toggleClass('border');
});
$('a#kutuac').click(function() {
$('#kutu').toggle('slow');

});

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

});
});

[/code]

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

[code lang="js"]

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

});

[/code]

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