Öncelikle Merhaba,EDIT: KODUN BAŞINA Ekleyin. Kaynak kodlar http://pastebin.com/m28b2b08cYUI Serisinin 2. dersinde nasıl resizable alan yapacağımızı göreceğiz. Neden jQuery yada Mootools kullanmadığımızı sorarsanız bunun nedeni jQuery ve Mootools’un UI framework’u olmaması. Her ne kadar jQuery UI olsa bile bunun ne kadar gelişmiş olduğu tartışılır. Konuya girelim.Yukarıdaki kodlar ile sayfamıza Resize işlemi için gerekli olan javascript dosyalarını dahil ediyoruz.#resizable {height: 150px;width: 277px;border: 4px solid black;background-color:#FFFF00;}
Burada resize id’si için özellikler atadık.

Hey! Resize ME!


Burada HTML alanımızı oluşturduk.var Dom = YAHOO.util.Dom,Event = YAHOO.util.Event;var resize = new YAHOO.util.Resize(‘resizable’, {handles: ‘all’,knobHandles: true,proxy: true,maxHeight:180,maxWidth:377,draggable: false, // or trueanimate: true,animateDuration: .75,animateEasing: YAHOO.util.Easing.elasticIn});
Kodun çalışması için en gerekli yer burasıydı. Açıklarsakvar resize ile alanı işaretledik. “Maxheight” ve “maxWidth” ile alanın en fazla aç piksel resize olacağını ayarlıyoruz.(px cinsinden) draggable ile nesnenin sürükle bırak olmasını sağlayabilirsiniz. Görsellik açısından gerektiği yerde kullanılabilir. “Animate” true diyerek bir animasyon hazırlamak için ilk adımı atıyoruz. Animasyonun geçerli olacağı süreyi belirtiyoruz ve “animateeasing” ile YUI içinde olan bir animasyon efektini ekliyoruz. Resizable alan böylece oluşmuş oluyor. Sorunlarınızı yorum olarak yazarsanız yardımcı olmaya çalışacağım dilerim ilgi çeker.