Penggunaan Fungsi Resizable Pada jQuery UI

JQuery UI merupakan plugin JQuery yang memiliki banyak fungsi salah satunya adalah .resizable() akan membuat elemen menjadi mudah diubah ukurannya. Saat sebuah elemen dikenai fungsi .resizable() maka ada sebuah tanda berbentuk simbol yang menempel di pojok kanan bawah dan selain itu kursor pointer juga akan berubah ketika kita meresizenya. Mari kita langsung saja pada pembahasan. Pertama kita buat sebuah kotak terlebih dahulu yang di ikuti dengan id = "area" sebagai berikut

dan tambahkan sedikit cssnya untuk menentukan lebar dan tinggi sebuah elemen

Berikut file - file yang kita butuhkan dalam memulainya : yaitu mengincludekan file jQuerynya sebagai berikut

Kemudian teman teman buat fungsi resizable() pada kotak tersebut

Sekarang kita sudah berhasil membuat elemen kotak tersebut dapat diubah berdasarkan ukurannya. Teman teman juga bisa menambahkan opsi-opsi pada fungsi tersebut contohnya

Penjelasan code diatas
Menentukan aspectRatio agar lebar dan tinggi elemen tetap proposional dan ideal sedangkan menentukan nilai ghost menjadi true akan memberikan perubahan ukuran elemen berupa elemen transparan. Tampilannya seperti ini

Menentukan nilai animate menjadi true akan memberikan efek animasi pada saat ukuran elemen sedang berubah. 

Kemudian teman teman juga menentukan opsi animate : true opsi lain seperti penentuan kecepatan animasi dan tipe easing juga bisa teman teman gunakan. Semoga Bermanfaat. Terima kasih.