Jquery UI Dersleri 8 – Resizable Events

Resizable eventları create, resize, start ve stop olmak üzere 4 adettir. Kullanımları draggable özelliğin eventlarına oldukçta benzemektedir.

create
Herhangibi nesneye resizable() özelliği verildiği anda tetiklenir.

start
Boyutlandırma işlemi başladığı anda tetiklenir.

resize
Herhangibi nesne yeniden boyutlandırılmaya başlandığı anda tetiklenir. Boyutlandırma durasıya kadar devam eder.

stop
Boyutlandırma işlemi bittiği anda tetiklenir.

Örnek Kullanım;

$(function(){
			$('div.box1').resizable({
			 	minWidth: 150,
			 	minHeight: 150,
				ghost: true,
			 	create: function()
				{
					$('span.text').html('Boyutlandırma başladığında aşağıda yeni ebatlar yazacak!');
					$('span.size').html('Ebat: G=150 Y=150');
				},

				start: function()
				{
					$('span.text').html('Boyutlandırma başladı!');
				},

				resize: function(events, ui)
				{
					height = Math.round(ui.size.height);
					width = Math.round(ui.size.width);
            		       $('span.size').html('Ebat: G='+width+' Y='+height);

				},

				stop: function()
				{
					$('span.text').html('Boyutlandırma bitti!');
				}
			});
		})

– Örnekte minWidth ve minHeight değerleri ile nesnenin en fazla 150 pixel olarak küçültülmesi sağlanmıştır.

Create eventinin çalıştığını anlamak için sayfa yüklenir yüklenmez boş span etiketlerinin içine başlangıç olarak birşeyler yazdırdım $(‘span.text’).html(‘Boyutlandırma başladığında aşağıda yeni ebatlar yazacak!’).

– Start eventi ile boyutlandırma işlemi başladığı anda text clasına sahip span etiketinin içine “Boyutlandırma başladı!”  yazdırdım.

-Boyutlandırma işlemi devam ederken resize eventi tetiklendiği için boyutlandırılan nesnenin o anki genişlik ve yükseklik değerlerini alıp size clasına sahip span etiketinin içine yazdırdım.

-Son olarak boyutlandırma işlemi bittiği anda stop eventi tetiklendiği için text clasına sahip span etiketinin içine “Boyutlandırma bitti!” yazdırdım.

Şunlarda Hoşunuza Gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

%d blogcu bunu beğendi: