Çalışmalarım

Nasıl jQuery Plugini (Eklentisi) Yazılır?

Ayrıntılar: Kategori: Dersler; 05 Ocak 2012 tarihinde yayınlandı.; THEMT tarafından yazıldı.

jQuery plugini nas?l yaz?ld???n? ufak bir örnekle ö?renmek isteyenler için ba?lang?ç seviyesinde bir yaz?

jQuery'e plugin yazmak için jQuery'i genişletmeniz gerekmektedir. Bunun için jQuery'nin extend fonksiyonunu kullanıcaksınız. Plugin'inizin fonksiyonlarını, değişkenlerini ve sınıflarını bu fonksiyona parametre olarak bir sınıf içinde vermek yetmektedir.

Aşağıdaki gibi bir sorgu işleminden sonra plugin'inizin ana fonksiyonunu çağırmak için jQuery'nin fn sınıfının extend fonksiyonunu çağırmalısınız.

// Sorgu sonrası pluginin çağrımı
jQuery('.slide').pluginim();

Bu durumda plugininiz için gereken kod aşağıdaki gibi olacaktır

jQuery.fn.extend({
	pluginim: function() {
	}
});

Tabi bu plugin şuan için hiç bir işlem yapmıyor. Şimdi bu plugine şöyle bir görev verelim, çağırıldığında; sorguda geçen tüm elemanların kenarına çizgi koysun yani border değerini değiştirsin.

jQuery.fn.extend({
	pluginim: function() {
		return this.each(function() {
			jQuery(this).css('border', '1px solid black');
		});
	}
});

this ile sorguyu yapan jQuery nesnesine ulaştık, each fonksiyonu sorgu sonucunda belirlenen elemanların tümünü döner ve tanımladığınız fonksiyonu çağırır yani bir tür for döngüsüdür. döngü içinde jQuery(this) ile döngü içindeki tekil elemana ulaşmış olduk. css('border', '1px solid black') fonksiyonu ile de border özelliğine '1px solid black' değeri atadık. Ve son olarak da yine sorguda geçen elemanları geri göndürdük return this.each... aşağıdaki örnekte olduğu gibi böylece pluginimiz çağrılması sonrasonda da jQuery işlemleri devam edebilir.

// Plugin çağırımından sonra yerel jQuery işlemleri devam ediyor
jQuery('.slide').pluginim().find('div');

each ile fonksiyona gönderilen tekil eleman, standart DOM elemanı olduğu için (yani bir jQuery nesnesi değil) tekrardan jQuery (this) ile jQuery nesnesi yaptık. Aksi halde jQuery'e özel fonksiyonları kullanamazdık.

Plugini biraz daha ileri götürüp plugine parametre aktaralım, böylece kenarlık değerini o an belirlenebilir hale gelsin

jQuery.fn.extend({
	pluginim: function() {
		return this.each(function(prm) {
			jQuery(this).css('border', prm);
		});
	}
});

Şimdi bu kodları jQuery.pluginim.js olarak kaydedin, ve kullanmak istediğiniz html sayfasının head içerisine, jQuery eklendikten hemen sonra aşağıdaki gibi ekleyin. ve son olarakda sorgu oluşturup, plugini çalıştırın.

<html>
<head>
	<script type="text/javascript" src="/scripts/jquery.js"></script>
	<script type="text/javascript" src="/scripts/jquery.pluginim.js"></script>
	<script type="text/javascript">
		$(document).ready(function(e) {
			$('.kutu').pluginim('1px solid black');
		});
	</script>
</head>
<body>
	<div class="kutu">A</div>
	<div class="kutu">B</div>
	<div class="kutu">C</div>
</body>
</html>

Yazı tarafımca yazılmıştır, kaynak berlitme amaçlı bu sayfanın adresi belirtilirse, kullanmanızda sorun oluşmayacaktır.