Jquery UI Dersleri 7 – Resizable Options

Resizable özelliği adından da anlaşılacağı üzeri uygulandığı nesnenin yeniden boyutlandırılabilir olmasını sağlıyor. Draggable ve Droppable özelliklerinde sayfaya JQuery ve JQuery UI kütüphanelerinin js dosyalarını dahil etmek yeterli oluyordu ancak resizable() özelliği için JQuery UI CSS dosyasınında  sayfaya dahil etmek gerekiyor. ilgili dosyaları sayfanın en altındaki önizleme bağlantısına tıklayıp açıln sayfanın kaynak kodunu inceleyerek bakabilirsiniz.

Bir nesnenin yeniden boyutlandırılabilir olmasını sağlamak için nesneyi Jquery ile seçtikten sonra resizable() özelliğini uygulamak yeterlidir.

Seçme ve uygulama işlemi

 $('div.box1').draggable() 

Boyutlanırma ile alakalı yapılabilecek ayarlar şu şekildedir.

maxWidth
Boyutlandırılacak nesnenin azami genişliğini belirtir. Pixel cinsinden değer girilir. Boyutlandırılan nesne en fazla maxWidth değerinde belirtilen genişliğe sahip olabilir.

maxHeight
Boyutlandırılacak nesnenin azami yüksekliğini belirtir. Pixel cinsinden değer girilir. Boyutlandırılan nesne en fazla maxHeight değerinde belirtilen yükseliğe sahip olabilir.

minWidth
Boyutlandırılacak nesnenin asgari  genişliğini belirtir. Pixel cinsinden değer girilir. Boyutlandırılan nesne en az minWidth değerinde belirtilen genişlik değeri kadar boyutlandırılabilir.

minHeight
Boyutlandırılacak nesnenin asgari  yüksekliğini belirtir. Pixel cinsinden değer girilir. Boyutlandırılan nesne en az minHeight değerinde belirtilen yükseklik değeri kadar boyutlandırılabilir.

aspectRatio
Boyutlandırılan nesnenin en boy oranını korumasını sağlar.

autoHide
Resizable özelliği verilen nesnenin sağ alt köşesinde beliren ok işaretini gizler. true yada false değerlerini alır. Varsayılan olarak false değerindedir.

delay
Boyutlandırma işleminin gecikme süresini ayarlar. Milisaniye cinsinden değer alır.

ghost
Boyutlandırma işlemi gerçekleşirken hayalet efekti olarak görünür. true yada false değeri alır.

grid
Grid ayarı ile değer belirtilmez ise boyutlandırma 1px olarak artma/azalma sağlar. grid ile artış yada azalış miktarı belirlenebilir. Dizi olarak 2 değer alır.

containment
Yeniden boyutlandırılan nesnenin sınırlarını belirler. parent yada document değerlerini alabilir. Varsayılan değeri false dir. Örneğin 1000px genişliğinde bir div olduğunu düşünün. İçerisine başka bir div daha olsun. İçerideki div e resizable özelliği verilsin ve containment değeri olarak parent belirtilsin. Bu durumda içerideki div en fazla dışarıdaki div in genişlik ve yükseklik değeri kadar boyutlandırılabilir.

Aşağıdaki örnekte box1 sınıfına sahip div e resizable özelliği uygulayıp minWidth, minHeight değerleri ile div in en az 150px genişliğinde ve 150px yüksekliğinde olmasını sağladım. Ardından maxWidth, maxHeight değerleri ile en fazla 500px genişliğinde ve 500px yüksekliğinde olmasını sağladım. Sayfanın en al tındaki önizleme düğmesine basarak daha detaylı bir örneği bakabilirsiniz.

Örnek;

$(function(){
			$('div.box1').resizable({
			 	minWidth: 150,
			 	minHeight: 150,
			 	maxWidth: 500,
			 	maxHeight: 500
			});
		})

Ş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: