jQuery eklentisi (plugin) yazmak


18 Nisan 2012     Etiketler: jQuery

Popüleritesi her geçen gün artan jQuery için eklenti yazmak gerçekten çok kolay ve tekrar kullanılabilirlik sağlaması açısından uzun vadede çok işinize yarayacak bir yöntem.


jQuery'yi hangi seviyede kullanıyorsanız kullanın, mutlaka her birimiz başkalarının yazdığı eklentileri (açık kod lisansı olmak kaydıyla tabii :)) kullanmışızdır. Peki, hiç kendiniz bir eklenti yazmayı denediniz mi? Eğer cevabınız hayır ise gelin beraber bu iş nasıl oluyor çözelim.

jQuery'nin sitesinde bu işle ilgili oldukça faydalı bilgiler mevcut. Oradan derlediklerimizi inceleyelim.

Diyelim ki jQuery tarafından seçilen her bir elementin künyesini (bir alert box içinde) gösterecek bir eklenti yazmak istiyoruz. Evet gerçek anlamda ne kadar faydalı olacağı tartışılır ama bizim için iyi bir basit örnek teşkil edecektir.

Eklentiğimiz bittiğinde şöyle çağırılacak $("jquery seçici").künye(); ve ("jquery seçici" tarafından) seçilen her bir HTML elemanının İD'sini alert box ile bildirecek.

Eklentimizi kodlamaya başlayalım.

ADIM 1
(function( $ ) {
$.fn.kunye = function() {
alert("test); //şimdilik bir test alert box gösterelim. "jquery seçici" kaç eleman seçerse seçsin, bu kod yalnızca bir kez çalışacak
};
})( jQuery );


ADIM 2
(function( $ ) {
$.fn.kunye = function() {
this.each(function() {
alert("test"); //bu kod seçilen her bir eleman için çalışacak
});
return this; //bu satırla ilgili yorum sonra
};
})( jQuery );


ADIM 3
(function( $ ) {
$.fn.kunye = function() {
this.each(function() {
alert($(this).attr("id"));
});
return this; //bu satırla ilgili yorum sonra
};
})( jQuery );


Evet, eklentimiz hazır. Çok basit de olsa çalışan bir jQuery eklentisi yazdık.

Son olarak return thiş; satırının ne için eklendiğini yazalım. Eğer eklentimiz başka bir değer döndürmüyorsa bütün jQuery eklentilerimizi bu satırla bitirmemiz tavsiye edilen bir yöntemdir. Nedenine gelince. jQuery'nin en beğenilen özelliklerinden biri zincirleme özelliğidir. Zincirleme özelliği nedir? Bir örnekle izah edelim.


$("div").fadeIn().addClass("beyaz");

Bu örnekte fadeIn ve addClass methodları ardı ardına çağırılıyor. yani eğer jQuery'nin zincirleme özelliği olmasaydı şu şekilde yazmak zorunda kalacaktık.

$("div").fadeIn();
$("div").addClass("beyaz");

Biz de eklenti metotlarımızda (eğer spesifik değer döndürmüyorsak) mutlaka return this; ile bitirmemiz lazım ki eklentimiz de jQuery'nin zincirleme özelliğinden mahrum kalmasın.

Umarım basit de olsa faydalı bulacağınız bir makele olmuştur. Görüşlerinize her zaman açığız. Lütfen yorum bırakın veya bize yazın, mesajlarına en kısa zamanda cebap verilecektir.

Kaynak: http://docs.jquery.com/Plugins/Authoring




Yorumlar


Bu makaleye ait yorum bulunamadı.

Sizin yorumunuz

Email


Adınız







F5 Dergi © 2017