• Şuradasınız
  • Anasayfa
  • JQuery
  • Jquery ile Boyutlandırılabilen Nesne Yaratma – Resizable

Jquery ile Boyutlandırılabilen Nesne Yaratma – Resizable

Jquery ile draggable ve droppable nesneler yaratmayı anlattıktan sonra şimdi de yeniden boyutlandırılabilen nesneler oluşturmayı anlatacağım.

Yeniden boyutlandırmayı textarea tagından bilirsiniz. Kendisi doğal olarak boyutu ayarlanabilen bir elementtir. Fakat jquery ile dilediğiniz tüm elementleri yeniden boyutlandırılabilir nesneler haline getirebilirsiniz. Yazının başlangıcı için örnek olması açısından buradaki örneğe bakabilirsiniz.

Resizable nesneler oluşturmak için gerekli kütüphaneleri sayfamıza ekleyelim.

<script src="jquery-1.6.1.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.mouse.js"></script>
<script src="jquery.ui.resizable.js"></script>

Gerekli kütüphaneleri ekledikten sonra artık resizable() fonksiyonunu kullanabiliriz.

Resizable fonksiyonununu öncelikle resize olayı ile birlikte kullanacağız.

$(".degistir").resizable({
   resize : function(){
      $(this).find("p").html("Yeniden boyutlandırılıyor.");
   }
});

Resize olayı, yani yeniden boyutlandırma olayı gerçekleştiği anda “Yeniden boyutlandırılıyor.” mesajı verilecek.

Örneği buradan inceleyebilirsiniz.

Resizable fonksiyonunun argümanlarına bakalım, argümanlara göre resize işlemini özelleştirebiliyoruz.

ratio argümanı ile resize edilen eleman oransal olarak büyüyor ya da küçülüyor.
Oranı siz belirliyorsunuz. (16/9, .5, 2 vs.)

$(".degistir").resizable({
   aspectRatio: 1
});

Sonuca buradan bakabilirsiniz.

Resize ettiğiniz elemanın maxHeight, maxWidth, minHeight, minWidth argümanları ile belli değer aralıklarında kalmasını sağlayabiliyorsunuz.

$(".degistir").resizable({
   maxHeight : 300,
   minHeight : 100,
   maxWidth : 500,
   minWidth : 200
});

Sonuca buradan bakabilirsiniz.

Yine containment argümanı ile boyutlandırdığınız elemanı başka bir element ile sarmalayarak o sınırların dışına çıkmasını engelleyebilirsiniz.

$(".degistir").resizable({
   containment : ".sarmala"
});

Örneği buradan inceleyebilirsiniz.

delay argümanı ile zaman olarak gecikme, distance argümanı ile mesafe olarak gecikme sağlayarak boyutlandırma yapabilirsiniz.

$(".degistir").resizable({
   distance : 50
});
$(".degistir_2").resizable({
   delay : 500
});

Sonuca buradan bakabilirsiniz.

helper argümanı ile resize işlemini yaparken size yardımcı bir sınıf belirterek, ondan yararlanabilirsiniz. Boyutlandırma işlemini kolaylaştırabiliyor. Daha iyi anlamak için bir örnek yapalım.

$(".degistir").resizable({
   helper : "mavi-cerceve"
});
$(".degistir_2").resizable({
   helper : "kirmizi-cerceve"
});

Örneği buradan inceleyebilirsiniz.

handles argümanı ile resize edilecek elemanın neresinden boyutlanabileceğini belirtebilirsiniz.

$(".degistir").resizable({
   handles : "n, s, w, ne, nw, se"
});

n – kuzey, s – güney, e – doğu, w – batı, ne – kuzeydoğu, nw – kuzeybatı, se – güneydoğu, sw – güneybatı

Yukarıdaki örnekte dikkat ettiyseniz e ve sw değerleri yok bu yüzden o yönlerden boyutu değiştirilemeyecek.

Sonuca buradan bakabilirsiniz.

alsoResize argümanı ile boyutlandırdığınız bir nesnenin başka bir nesne ile aynı anda, senkronize bir şekilde boyutlanmasını sağlayabilirsiniz.

$(".degistir").resizable({
   alsoResize : ".degistir_2"
});
$(".degistir_2").resizable();

Örneği buradan inceleyebilirsiniz.

ghost argümanı ile boyutlandırdığınız nesnenin şeffaf bir örneğini kendinize yardımcı olarak ayarlayabilirsiniz. Tam olarak anlatamadım ama helper argümanına da benziyor. Örneğe bakalım.

$(".degistir").resizable({
   ghost : true
});

Sonuca buradan bakabilirsiniz.

Son olarak en güzel argümana bakalım. animate argümanı ile çektiğiniz nesneyi yavaş bir şekilde boyurlandırabilirsiniz.

$(".degistir").resizable({
   animate : true,
   ghost : true
});
$(".degistir_2").resizable({
   animate : true,
   animateDuration : 2000,
   ghost : true
});

Ayrıca animateDuration argümanı ile de zamanı ayarlayabilirsiniz.

Sonucu buradan inceleyebilirsiniz.

Benim anlatacaklarım bu kadardı, siz dilerseniz jquery ui sitesine girerek daha fazlasını bulabilirsiniz.

Yazıdaki tüm örnekleri indirmek için tıklayınız.

Benzer Yazılar

Yorumlar

Yorum Yazın

Su elementleri kullanabilirsiniz : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Arama
RSS
Beni yukari isinla