JQuery ile Nesnenin Show / Hide Event Yakalama

Javascript tarafında oldukça fazla event ( olay ) var. JQuery ile birleştiğinde daha da fazla eventlara hatta özelleştirilmişlere dahi sahip olabiliyorsunuz. Bir projede form hazırlarken div nesnesinin show / hide durumuna göre başka bir nesnenin işlenmesi gerekiyordu. Ufak bir araştırma sonucu herhangi bir nesnenin – sadece div değil – show / hide durumlarına göre event atayabileceğimi buldum.

Aşağıdaki kod ile bu event ın tanımlamasını yapıyoruz

	( function( $ )
	{
	  	$.each(['show', 'hide'], function (i, ev)
	  	{
			var el = $.fn[ ev ];
			$.fn[ ev ] = function()
			{
		  		this.trigger( ev );
		  		return el.apply( this, arguments );
			};
	  	});
	})(jQuery);

Örnek kullanım;

	$( 'div' ).on( 'show', function()
	{
		$( 'span' ).html( 'div gösterim durumu açık' );
	});
	$( 'div' ).on( 'hide', function()
	{
		$( 'span' ).html( 'div gösterim durumu kapalı' );
	});

Siz div veya kendi class / id her neyse artık $( ‘div’ ).show(); veya $( ‘div’ ).hide(); yaptığınızda span nesnesi içerisinde durumunu açıklayan yazıyı yazacak. Bu ihtiyaç bizim için sekmeli form işlemi yaparken verilen cevaplara göre bir sonraki sorunun ( her bir soru bir div içerisinde yapı olarak yer alıyor )  hangisi olacağını belirliyordu. Basit bir işlem için bu şekilde bir kullanıma gerek kalmayabilir fakat hareket güzel. 🙂

Denemedim fakat event ataması yapılırken each ile birlikte show / hide belirteci yapılırken farklı eventlar üzerinden event türetimi yapılabilir sanırım.

Bir Cevap Yazın