jQuery Slidedown Metodu Kullanımı

admin tarafından 15 Mart 2010 tarihinde gönderildi

jQuery kullanımını en baştan ele alarak, şu dersimizde belirttiğimiz slideDown metoduna bir örnektir.

jQuery Nasıl Kullanılır

İlk olarak video derslerimizi izlediyseniz jQuery kullanabilmek için, indireceğimiz jquery dosayasını HTML sayfamıza import etmemiz gerekmektedir.Bunun için aşağıdaki kodu kullanınız.

[php]

[/php]

jquery-1.2.6.pack.js olan bölümü indirdiğiniz jquery dosyasının klasör yolunu belirterek yazınız.Bu kodu html sayfamızın <head> .. </head> tagları arasına yapıştırınız.

Aşağıdaki görsel Anlatımda uygulananlar jQuery’î dah iyi anlamak için yetkindir.

Elementleri Nasıl Çağırırız

Aslında jquery kullanabilmek için kod ezberlememize gerek yoktur( Daha önce yazılmış harika kodları kullanabiliriz)

Fakat bazen kullanacağımız kodları kişiselleştirmemiz gerekebilir.Bunlardan bazılarını örnek olarak açıklayacağım;

$("#header") = id=”header” ile birlikte elemanı çağırır
$("h3") = bütün <h3> adlı elemanları çağırır
$("div#content .photo") = class=”photo” olarak atanılan <div id=”content”> içerisindeki bütün elemanları çağırır.
$("ul li") = <li> olarak adlandırılan <ul> içerisindeki bütün elemanları çağırır.
$("ul li:first") = <ul> içerisindeki ilk <li> elemanını çağırır.

Elementlere Nasıl Fonksiyon Atanır

Yukarıda belirttiğimiz $(“elamanımız”) olarak örneklendirdiğim gibi fonksiyon ataması yapabilmek içinde, jquery kodlarımın başında;

[php]

$(function() {

<<- Bu alana jQuery içerisinde kullanacağımız kodlarımız gelecektir ->>

});

[/php]

$function yapısı ile yeni bir fonksiyon atar ve değerini gireriz.Aşağıda verdiğim örnek ile jquery fonksiyonumuza yeni bir işlev tanımlarız

[php]

$(".button").click(function() {

[/php]

yapısı ile button adlı nesneye (click) komutu ile tıklanıldığında yeni bir fonksiyon oluşmasını sağlarız;

[php]

$("#panel").slideDown("slow");

});

[/php]

Kodları ile panel id’li nesnenin slideDown metodu ile aşağı kaymasını sağlarız. Slow belirteci ise animasyonuın yavaş yürümesi gerektiğini bildirir.

slideDown yönteminin kullanılmasına ilişkin video Dersimiz için video izle butonuna tıklayın;